javascript中的下拉菜单，其中添加了新元素

Question

我是javascript新手，此刻我正在尝试使用“基本DOM和JS”。 我正在做一个下拉菜单，是从数组中获取元素的。 有一个输入字段，您可以在其中添加新项目到数组中。我还创建了一个按钮来将项目推入并保存到数组中，并使用DOM自动创建下拉菜单。

我的问题是，如果您按下按钮，则始终使它成为新的下拉菜单。 否则，数组可以很好地工作，但是我只需要一个包含数组项的下拉菜单。 我认为这个问题也会在ul li上市时出现。 这是我的完整代码，感谢您的帮助

<!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>

Answer 1

每次调用array()时都在创建select标签。 因此，只创建一次select标签，其余时间在调用array()时创建option标签。 这是您的解决方案。

<!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>

Answer 2

因此，苏曼（Suman）已经回答了您的问题，但是在简化代码或方法方面，我认为您可以通过完全取消使用“选择”数组来采用其他方法。 不需要将数组添加到选择列表中，因为您可以从输入元素中获取所需的所有内容，因此只需将选项添加到实际的选择DOM元素中即可。

考虑到这一点，在这里重新构造了所需的功能。

<!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>

您可以在此jsFiddle上看到此操作

javascript中的下拉菜单，其中添加了新元素

问题描述

2 个解决方案

解决方案1
1 2014-02-01 12:29:08

解决方案2
0 已采纳 2014-02-01 13:15:09

javascript中的下拉菜单，其中添加了新元素

问题描述

2 个解决方案

解决方案1 1 2014-02-01 12:29:08

解决方案2 0 已采纳 2014-02-01 13:15:09

解决方案1
1 2014-02-01 12:29:08

解决方案2
0 已采纳 2014-02-01 13:15:09