用select下拉框控制指定的div显示，其他层隐藏，用javascript怎么写，求高手指点一下
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用select下拉框控制指定的div显示，其他层隐藏，用javascript怎么写，求高手指点一下相关的知识，希望对你有一定的参考价值。
假若下拉框选项有10个 option 1,option 2,option 3,... option 10 ，分别控制 div1,div2,div3...，div10的显示，要求选中option1时，div1出现，其他的隐藏，换选中option 2时，div2显示，其他隐藏，以此类推。。。。
1.掌握显示、隐藏div的方法：obj_div.style.display = \'none\' | \'block;
2.掌握给select添加事件的方法：
obj_select.onclick = function();
3.把option跟div们映射起来:
option的value设置成1、2、3...，div的id设置成div1、div2、div3...
具备以上技术，你就应该能写出来了。 参考技术A 每个div设一个id，设置属性display="none" 然后在js当选中option1时，div1.style.display = "block",选择第二个时div2.style.display = "block";div1.style.display = "none" 以此类推 参考技术B <style type="text/css">
divdisplay:none;
</style>
<body>
<select name="select1" id="select1">
<option name="option1" id="option1" value="value1">value1</option>
<option name="option2" id="option2" value="value2">value2</option>
<option name="option3" id="option3" value="value3">value3</option>
<option name="option4" id="option4" value="value4">value4</option>
<option name="option5" id="option5" value="value5">value5</option>
</select>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
<div id="div6">6</div>
<div id="div7">7</div>
</body>
<script>
var select = document.getElementById("select1");
select.onchange = function()
var options = select.getElementsByTagName("option");
for(var i = 0; i < options.length; i++)
if(options[i].selected)
var divid = options[i].id.replace("option","div");
var divs = document.getElementsByTagName("div");
for(var j = 0; j < divs.length; j++)
if(divid == divs[j].id)
divs[j].style.display = "block";
else
divs[j].style.display = "none";
</script>本回答被提问者采纳
如何用js实现select下拉框里是树形结构，可复选，select框中传复选所有值？如下图所示。
参考技术A 首先说树形结构，国内有个开源的js控件叫zTree，支持复选。然后下拉框你可能需要自己做一个（html输入框+右边的一个图标按钮）。
最后，用一个隐藏的div把树形结构包起来，这个div设置成绝对定位，在下拉框右侧选择按钮的单击事件处理函数里，显示这个隐藏的div，并把它的位置设置成在下拉框下面就行了。
思路就是这样，要么楼主可以找找有没有其他更现成的控件，extjs4我记得有类似的，但是他的复选功能不太符合中国习惯，也许现在的版本改好了，你可以查查试试看。 参考技术B 这个插件可以支持。使用比较简单，不过默认样式和你这个有区别。你需要自己调整下样式就行了https://github.com/purecreek/MultipleTreeSelect 参考技术C https://github.com/lonlie/select2tree，这个。 参考技术D 从你的图片看应该是jquery-easyui的combotree
你可下载提取使用。 第5个回答 2013-06-09 1.如果能实tree,那就能实现在下拉框里显示tree,无非就是把内容放在div里面,把div放到select下面.
2.关于tree如何实现,呵呵,实现很复杂,楼主如果有心研究,可以找个开源js框架自己研究去.
以上是关于用select下拉框控制指定的div显示，其他层隐藏，用javascript怎么写，求高手指点一下的主要内容，如果未能解决你的问题，请参考以下文章