Question

我有一点点删除。

我在下面有以下静态选择框，但是，数据库会将其单元格值与选择框的单元格值进行比较并选择它。

我的问题是如何设计一个动态添加新选择选项的功能（在现有列表的末尾），如果它已经不在列表中？

这对我来说似乎不起作用？

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function test() {
                //document.getElementById('name').innerHTML = "test"
                document.getElementById('name').text = "test"
            }
        </script>
    </head>

    <body>
        <select id="name">
            <option value=""></option>
            <option value="John">John</option>
            <option value="Patrick">Patrick</option>
            <option value="Jean">Jean</option>
            <option value="Jackie">Jackie</option>
            <option value="Stephanie">Stephanie</option>
            <option value="Nicole">Nicole</option>
            <option value="Lucie">Lucie</option>
        </select>
        <input id="btn1" type="button" value="testme" onclick="test()" />
    </body>

</html>

Answer 1

你必须检查每一个：

function test() {

   var checkWhat = 'test'; // value to check for 

   var options = document.getElementById('name').getElementsByTagName('option'),
       exists  = false;

   for (var i=options.length; i--;) {
        if ( options[i].value == checkWhat ) {
            exists = true; // an option with that value already exists
            break;
        }
   }

   if (!exists) { 
       var option = document.createElement('option');

       option.value = 'test';
       option.innerHTML = 'test';

       document.getElementById('name').appendChild(option);
   }

}

Answer 2

您可以创建一个循环遍历select元素中所有选项的函数，如果选项值尚不存在，则将其附加到select标记。

var addOption = function(value){
    var select = document.getElementById('name'),        // get the select tag
        options = select.getElementsByTagName('option'), // get all option tags within that select
        alreadyExists = false;
    for(var i = 0, l = options.length; i < l; i++){      // loop through the existing options
        if(options[i].value == value)                    // check if value already exists
            alreadyExists = true;
    }
    if(!alreadyExists){                                  // if value doesn't already exist
        var newOption = document.createElement('option');// create a new option and add it to the select
        newOption.value = value;
        newOption.innerHTML = value;
        select.appendChild(newOption); 
    }
};

演示：http://jsfiddle.net/2TZ45/

如果新选项值尚未存在，则将其动态添加到选择框中

2 个答案: