javascript selection menu dynamically add items from an array

Question

Hi everyone and thanks for helping on my first post.

I'm doing some work learning javascript and I gave myself the exercise of creating a page with an input text field, a button, and a selection box. I have created an array to hold input items from the text field and built a function to check and see if the array already contains the item.

What I would like to do, is have the selection box update dynamically to include new input items as they are entered into the array. Currently, I can get the selection box to update however, I end up with duplicate items in the selection box. I would like to prevent this occurrence. Can anyone suggest the best approach to this? I got the below code from another stack overflow post here. Apologies for any erroneous alerts or commented out sections. I have been using this to test.

<!DOCTYPE html>
<html>

<head>
    <title>Keeper of Time</title>

    <link rel="stylesheet" type="text/css" href="kot.css">

</head>

<body>

    <div class="navDiv">

        <ul id="navButtons">
            <li><a href="">Home</a></li>
            <li><a href="">Clients</a></li>
            <li><a href="">Entries</a></li>
            <span><li><a href="">Account</a></li></span>

        </ul>
    </div>


    <div id="newCltDiv">

        <input id="newClt" type="text" placeholder="Add a new client">
        <button id="addCltBtn"> Add Client</button>

    </div>

    <br>
    <br>

    <div id="cltListDiv">
        <select id="cltList">
            <option>Select an existing client</option>
        </select>

    </div>


    <br>
    <br>

    <div id="test"></div>



    <script type="text/javascript">
        var clientArray = [];
        var clientInput = document.getElementById("newClt");
        var sel = document.getElementById("cltList");

        document.getElementById("addCltBtn").onclick = function() {

            console.log(clientArray.length);
            if (!contains(clientArray, clientInput.value)) {
                clientArray.push(clientInput.value);
                console.log("Objects: " + clientArray.join(", "));
                updateDropList();
            } else alert("You already have a client by that name!");
        }


        function updateDropList() {
            for (var i = 0; i < clientArray.length; i++) {
                var opt = document.createElement('option');
                opt.innerHTML = clientArray[i];
                opt.value = clientArray[i];
                sel.appendChild(opt);
            }
        }



        /*
                clientArray.push("soccer");

                if(contains(clientArray, "soccer")){
                    alert("the array contains soccer");
                }
                */

        function contains(a, obj) {
            for (var i = 0; i < a.length; i++) {
                if (a[i] === obj) {
                    return true;
                }

            }
            return false;
        }
    </script>


</body>

</html>

score 0 · Accepted Answer · answered May 01 '15 at 08:36

0

It's because you're looping through the entire clientArray each time.

Try this:

 function updateDropList() {
     var lastKey = clientArray.length-1;
     var opt = document.createElement('option');
     opt.innerHTML = clientArray[lastKey];
     opt.value = clientArray[lastKey];
     sel.appendChild(opt);
 }

http://jsfiddle.net/cL61jhuo/

answered May 01 '15 at 08:36

Bitwise Creative

4,035
5
27
35

Worked like a charm. I see what you meant now too. Thanks for that. It makes total sense not to iterate through each element of the array and to just append. Thank you again! – Panayiotis Spanos May 01 '15 at 08:40
Instead of fishing the value out of `clientArray`, I would suggest passing `clientInput.value` into `updateDropList()` as a parameter, as shown in this [updated fiddle](http://jsfiddle.net/geary/cL61jhuo/1/). – Michael Geary May 01 '15 at 08:43

javascript selection menu dynamically add items from an array

1 Answers1