向选择框添加选项(如果尚未列出该选项)
Adding an option to a select box, if the option is not already listed
我需要你的帮助,
我如何向现有的 javascript 代码添加函数,以便当 field1 中提供的新值未在选择框中列出时,该代码将:
-
检查(字段 1( 值是否已在选择框中列出,如果是,则在 (字段 2( 中选择其值;
如果字段 1 中 提供的值未在选择框(字段 2(中列出,则从 (字段 1( 添加新值并在 (字段 2( 中选择它
这里有一个小提琴:http://jsfiddle.net/s66qg6xp/
代码:
<!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>
相关文章:
- 函数未在Object.keys或Object.getOwnPropertyNames下列出,但可以调用
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 找不到在 create-js 中运行的动画,未列出任何错误
- 已选择挖空JS选项未显示
- chrome.history.getVisits未列出所有URL
- jQuery - 根据下拉选项选择列出结果
- Javascript - 取消选中数组未列出的所有元素
- 正则表达式帮助 - 匹配列表中未列出的任何 URL 参数和值
- 图表选项未注册 scaleStartValue
- 当前选择的选项未正确显示
- jquery插件选项未正确扩展并覆盖
- JW播放器未列出的youtube视频
- 在不删除未列出项目的情况下,将多个源的映射删除到单个列表中
- JQgrid搜索选项未显示
- 样式右侧和样式顶部选项未在中更新
- style.right和.style.top选项未在中更新
- 检查一个空的<选项>未被选中
- Select选项未更新'selected'属性在HTML网页
- JQueryMobile动态添加的选项未反映
- ng选项未正确更新ng模型