[英]Adding/Removing/Updating options from select inputs
这是我开始做的事情: http : //jsfiddle.net/nd9ny/
目前,它无法正常运行。
每当添加新的选择输入或删除输入时,我都想更新选项。
例如,我们首先选择具有以下选项的输入:
<select>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</select>
当我向页面添加新输入时,我希望函数更新所有输入并从中删除新选择的选项。
<select>
<option value="1" selected></option>
<option value="3"></option> // The second one is removed
<option value="4"></option>
</select>
<select>
<option value="2" selected></option> // The first one is removed
<option value="3"></option>
<option value="4"></option>
</select>
然后,如果我删除第一个输入,则第二个变为:
<select>
<option value="1"></option>
<option value="2" selected></option>
<option value="3"></option>
<option value="4"></option>
</select>
需要纯Javascript代码。
您可以尝试以下解决方案:
-CSS:
.hidden {
display: none;
}
-JS功能:
function hide_selected(el) {
var index = el.selectedIndex;
// Show every options
for(var i=0; i<el.length; i++)
el[i].className="";
// Hide the selected one
el[index].className="hidden";
}
-HTML示例:
<body>
<select onchange="javascript:hide_selected(this);">
<option value="1" class="hidden" selected="selected">1</option>
<option value="2" class="">2</option>
<option value="3" class="">3</option>
<option value="4" class="">4</option>
</select>
</body>
注意:此功能已在Firefox上进行了测试,您可能必须检查该功能是否适用于其他浏览器。
希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.