用select下拉框控制指定的div显示，其他层隐藏，用javascript怎么写，求高手指点一下
假若下拉框选项有10个option1,option2,option3,...option10，分别控制div1,div2,div3...，div10的显示，要求选中opt...
假若下拉框选项有10个 option 1,option 2,option 3,... option 10 ，分别控制 div1,div2,div3...，div10的显示，要求选中option1时，div1出现，其他的隐藏，换选中option 2时，div2显示，其他隐藏，以此类推。。。。
展开
3个回答
展开全部
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...
具备以上技术，你就应该能写出来了。
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...
具备以上技术，你就应该能写出来了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
每个div设一个id，设置属性display="none" 然后在js当选中option1时，div1.style.display = "block",选择第二个时div2.style.display = "block";div1.style.display = "none" 以此类推
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
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>
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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
