我有一个基于用户登录生成的国家/地区选择菜单。对于列出的所有国家/地区,我希望显示这些国家/地区div,而应隐藏选择菜单中未引用的所有其他国家/地区div。什么是最好的方法呢?
我到目前为止最接近的是使用OnChange根据下拉菜单选项一次显示一个div(参见代码snippit)。但是我想让它在菜单中显示“all”div而不必点击任何东西,而菜单中未列出的剩余div应该被隐藏。提前谢谢!
编辑:添加代码
function fctCheck(countries) {
var elems = document.getElementsByName("selector");
for (var i = 0; i < elems.length; i++) {
elems.item(i).style.display = "none";
}
document.getElementById(countries).style.display = "block";
}
<select id="country" onchange="fctCheck(this.value);">
<option value="America">America</option>
<option value="Australia">Australia</option>
<option value="India">India</option>
</select>
<div id="America" name="selector" style="display:none">America Content</div>
<div id="Australia" name="selector" style="display:none">Australia Content</div>
<div id="China" name="selector" style="display:none">China Content</div>
<div id="India" name="selector" style="display:none">India Content</div>
<div id="Japan" name="selector" style="display:none">Japan Content</div>