[英]Changing 2nd dropdown options based on first dropdown choice in plain JavaScript
Given this html:鉴于此html:
<select id="fruits" name="fruits">
<option selected>Please select a fruit</option>
<option>Apple</option>
<option>Mango</option>
<option>Banana</option>
</select>
<select id="options" name="options">
<option selected>--Select a fruit first--</option>
<option>is sometimes green</option>
<option>is sometimes yellow</option>
<option>is sometimes blood red</option>
<option>is sometimes sour</option>
<option>is sometimes sweet</option>
<option>is sometimes bitter</option>
</select>
If I select apple from the first drop down, only the options如果我从第一个下拉菜单中选择苹果,只有选项
should be available.应该可用。 Others should be removed/hidden.
其他人应该被删除/隐藏。 I am looking for a JavaScript only solution;
我正在寻找仅 JavaScript 的解决方案; I don't know jQuery.
我不知道 jQuery。
This html attaches the function setOption
to the onchange
-event.此 html 将函数
setOption
附加到onchange
-事件。 According to quirksmode the change event is buggy .根据 quirksmode的变化事件是错误的。 So you might have to fix / expand to improve cross browser compatibility.
因此,您可能需要修复/扩展以提高跨浏览器兼容性。
<select id="s1" onchange="setOptions()">
<option>Pizza</option>
<option>Pasta</option>
<option>HotDogs</option>
</select>
<select id="s2">
<option>Pizza 1</option>
<option>Pizza 2</option>
<option>Pizza 3</option>
</select>
This javascript changes the options of the second select s2
after the selected option of the first select s1
was changed - the onchange-event was fired:在更改了第一个选择
s1
的选定选项后,此 javascript 更改了第二个选择s2
的选项 - 触发了 onchange 事件:
function setOptions()
{
document.getElementById('s2').options.length = 0; // remove all options
var selIndex = document.getElementById("s1").selectedIndex;
if(selIndex == 0)
addAllOptions('s2', ["Pizza Diavolo","Pizza Veggie"]);
else if(selIndex == 1){
addAllOptions('s2', ["Pasta Napoli","Pasta Primavera"]);
}
else{
addAllOptions('s2', ["Hot Dog Chilie King","Hot Dog Silent Wiener"]);
}
}
And to add options并添加选项
function addAllOptions(selectID, values)
{
var arrayLength = values.length;
for (var i = 0; i < arrayLength; i++) {
appendOptionLast(selectID,values[i]);
}
}
This function might need be be enhanced as well to improve cross browser compabillity.可能还需要增强此功能以提高跨浏览器的兼容性。
// see http://www.mredkj.com/tutorials/tutorial005.html
function appendOptionLast(selectID, num)
{
var elSel = document.getElementById(selectID);
var elOptNew = document.createElement('option');
elOptNew.text = num;
elOptNew.value = 'a_' + num;
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew); // IE only
}
}
See the fully working demo查看完整的演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.