用select下拉框控制指定的div显示，其他层隐藏，用javascript怎么写，求高手指点一下
发布网友
发布时间：2022-05-21 14:41
共3个回答
热心网友
时间：2023-11-20 09:59
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...
具备以上技术，你就应该能写出来了。
热心网友
时间：2023-11-20 10:00
热心网友
时间：2023-11-20 10:00
div{display: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>
