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

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

<!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已经回答了你的问题，但是在简化代码或方法方面，我认为你可以通过完全取消使用“select”数组来采取不同的方法。数组不需要将值添加到选择列表中，因为您可以从input元素中获取所需的所有内容，因此您只需要将选项添加到实际的select 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 个答案: