dropdown menu in javascript with adding new elements

Question

I am new in javascript and in this moment I am trying to use "Basic DOM and JS". I am doing a dropdown menu, what gets his elements from an array. There is an input field, where you can add new items into the array.I also made a button to push and save the item into array and make the dropdown automatically with DOM.

My problem if you push the button, it makes always a new dropdown menu. Otherwise the array works good, but I need just one dropdown menu with the items of array. I think this problem comes out at listing with ul li too. Here is my whole code and thanks for helping

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<meta charset="utf-8">
<script>
    var select = new Array;

    function array(){
        var input = document.getElementById("input");
        var value = input.value;
        select.push(value);

        var menu = document.createElement("select");
        document.body.appendChild(menu);

        for(var i = 0; i<select.length; i++){
            var option = document.createElement("option");
            var text = document.createTextNode(select[i]);
            option.appendChild(text);
            menu.appendChild(option);

        }
    }

</script>
</head>
<body>

<input id="input" type="text">
<input onclick="array()" type="button" value="Add">

</body>
</html>

Suman Bogati · Accepted Answer · 2014-02-01 12:29:08Z

You are creating the select tag every time array() is invoked. So create select tag once and rest of the time create option tag when array() is invoked. Here is your solution.

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<meta charset="utf-8">
<script>
    var select = new Array;
    var selectIsCreated = false;
    var menu;
    function array(){
        var input = document.getElementById("input");
        var value = input.value;
        select.push(value);

        if(!selectIsCreated){
            menu = document.createElement("select");
            document.body.appendChild(menu);    
            selectIsCreated = true;
        }
        var option = document.createElement("option");
        var text = document.createTextNode(select[select.length-1]);
        option.appendChild(text);
        menu.appendChild(option);
    }

</script>
</head>
<body>
<input id="input" type="text">
<input onclick="array()" type="button" value="Add">
</body>
</html>

Alistair · Accepted Answer · 2014-02-01 14:46:33Z

0

So Suman already answered your question, but in terms of simplifying the code or the approach, I think you could take a different approach by removing the use of the "select" array entirely. The array isn't necessary to add in the value to the select list, as you can get everything you need from the input element, so you just need to work on adding the option to the actual select DOM element.

Here is the desired functionality re-factored a bit with this in mind.

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<meta charset="utf-8">
<script>
    function createSelect() {
        select = document.createElement('select');
        select.id = 'select';
        document.body.appendChild(select);
        return document.getElementById('select');
    }

    function addOption(){
        var input = document.getElementById("input");
        var value = input.value;
        // This will attempt to grab the 'select' element, but if it finds
        // that it doesn't exist (i.e. getElementById returns a "falsy" value)
        // then it will return the value of the createSelect function. 
        // This could also be done with more explicit "if" statements
        var menu = document.getElementById('select') || createSelect();

        // The same effect could be achieved by running this code:
        /*
        var menu = document.getElementById('select');

        // If the select element hasn't been created/added to the page yet,
        // then the above call to getElementById will return a "falsy" value,
        // i.e. a value that isn't a strict boolean type but JS will treat it
        // as "false".  
        if (!menu) {
            menu = createSelect();
        }
        */

        var option = document.createElement("option");
        var text = document.createTextNode(value);
        option.appendChild(text);
        menu.appendChild(option);   
    }
</script>
</head>
<body>
<input id="input" type="text">
<!-- 
I've renamed the array() function since we don't even 
have an array anymore 
 -->
<input onclick="addOption()" type="button" value="Add">
</body>
</html>

You can see this in action on this jsFiddle

edited Feb 1, 2014 at 14:46

answered Feb 1, 2014 at 13:15

Alistair

262 bronze badges

3 Comments

GaborJ Over a year ago

both of solutions are great, the second one is really cool that you don't use an array to save the new items. I take me time and try to understand a bit better.

GaborJ Over a year ago

An other question, why is return false in createSelect(), if after the first three rows in the function select with id="select" exists?

Alistair Over a year ago

So I didn't mean to imply that the createSelect function was returning false - I've updated the original answer with an equivalent piece of logic using actual "if" statements

Collectives™ on Stack Overflow

dropdown menu in javascript with adding new elements

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related