[英]Adding an option to a select box, if the option is not already listed
I need your help, 我需要你的帮助,
How can I additionally add function to the existing javascript code, such that when a new value provided in the field1 and is not listed in the select box, that the code will: 如何在现有的javascript代码中另外添加函数,这样当field1中提供的新值未在选择框中列出时,代码将:
Check if the (field1) value is already listed in the select box, if it is, then select its value in (field2) and; 检查(field1)值是否已在选择框中列出,如果是,则在(field2)中选择其值;
If the value provided in the field1 is not listed in the select box (field2) then add the new value from (field1) and select it in (field2) 如果field1中提供的值未在选择框(field2)中列出,则从(field1)添加新值并在(field2)中选择它
Here's a fiddle: http://jsfiddle.net/s66qg6xp/ 这是一个小提琴: http : //jsfiddle.net/s66qg6xp/
The code: 编码:
<!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>
All in JS: 所有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>
Or you can do it with jQuery: 或者你可以用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.