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>

Bitwise Creative · Accepted Answer · 2015-05-01 08:36:46Z

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 1, 2015 at 8:36

Bitwise Creative

4,0805 gold badges31 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Panayiotis Spanos Over a year ago

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!

Michael Geary Over a year ago

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.

Collectives™ on Stack Overflow

javascript selection menu dynamically add items from an array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related