显示选择菜单

时间:2015-11-23 09:41:27

标签: javascript html select drop-down-menu show-hide

我有一个基于用户登录生成的国家/地区选择菜单。对于列出的所有国家/地区,我希望显示这些国家/地区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>

0 个答案:

没有答案