Javascript 将选项添加到选择框（如果该选项尚未列出）_Javascript

Javascript 将选项添加到选择框（如果该选项尚未列出）

javascript

Javascript 将选项添加到选择框（如果该选项尚未列出）,javascript,Javascript,我需要你的帮助如何向现有javascript代码中添加函数，以便在字段1中提供新值且未在选择框中列出时，代码将：检查选择框中是否已列出field1值，如果已列出，则在field2和中选择其值如果字段1中提供的值未在选择框字段2中列出，则从字段1中添加新值并在字段2中选择这是一把小提琴：守则： <!DOCTYPE html> <html> <head> <script type="text/javascript">

我需要你的帮助

如何向现有javascript代码中添加函数，以便在字段1中提供新值且未在选择框中列出时，代码将：

检查选择框中是否已列出field1值，如果已列出，则在field2和中选择其值

如果字段1中提供的值未在选择框字段2中列出，则从字段1中添加新值并在字段2中选择

这是一把小提琴：

守则：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function test() {
                document.getElementById('field2').value = document.getElementById('field1').value
            }
        </script>
    </head>
    <body>
        <input type="text" id="field1">
        <br>
        <select id="field2">
            <option value="apples">apples</option>
            <option value="oranges">oranges</option>
            <option value="bananas">bananas</option>
        </select>
        <br>
        <input type="button" value="test" onclick="test()">
    </body>
</html>

全部在JS中：

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function test() {

var alreadyInList = [];
var allOptions = document.getElementsByTagName('option');
// populate already in list
for(var i = 0; i < allOptions.length; i++) {
    alreadyInList[i] = allOptions[i].value;
}

var input = document.getElementById('field1').value;
for(var i = 0; i < allOptions.length; i++) {
    if(alreadyInList.indexOf(input) > -1) {
        // element is already in the list
    } else {
        alreadyInList.push(input);
        var option = document.createElement('option');
        option.value = input;
        option.text = input;
        document.getElementById('field2').appendChild(option);
    }
}

}


</script>

</head>

<body>

<input type="text" id="field1">
<br>
<select id="field2">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
<br>
<input type="button" value="test" onclick="test()">

</body>

</html>

或者您也可以使用jQuery执行此操作：

<!DOCTYPE html>
<html>
  <head>

    <script src="jquery-2.1.3.min.js"></script>

    <script type="text/javascript">
       function test() {
            var NewOption=document.getElementById("field1").value;
            var options=$("#field2").children().filter(function (){return $(this).text()==NewOption});
            if (options.length==0){                
              document.getElementById("field2").innerHTML=document.getElementById("field2").innerHTML+"<option value='"+NewOption+"'>"+NewOption+"</option>";
            }
            document.getElementById('field2').value = document.getElementById('field1').value;
        }



    </script>
</head>
<body>
    <input type="text" id="field1">
    <br>
    <select id="field2">
        <option value="apples">apples</option>
        <option value="oranges">oranges</option>
        <option value="bananas">bananas</option>
    </select>
    <br>
    <input type="button" value="test" onclick="test()">
</body>

请将您的代码放入标记或使用代码片段。您尝试了什么？看起来这是一个“为我做”的问题对不起，我是javascript的初学者。