javascript选择菜单从数组动态添加项目

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. 我正在做一些学习JavaScript的工作，并给自己做了一个创建带有输入文本字段，按钮和选择框的页面的练习。 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>

Answer 1

It's because you're looping through the entire clientArray each time. 这是因为您每次都遍历整个clientArray 。

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/ http://jsfiddle.net/cL61jhuo/

javascript选择菜单从数组动态添加项目

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-05-01 08:36:46

javascript选择菜单从数组动态添加项目

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-05-01 08:36:46

解决方案1
0 已采纳 2015-05-01 08:36:46