JavaScript根据Select选项控制div？
<selectid="select1"><optionid="option1">1</option><optionid="option2">2</option></sel...
<select id="select1">
<option id="option1" >1</option>
<option id="option2" >2</option>
</select>
<div id="div1">a</div>
<div id="div2">b</div>
<select id="select2">
<option id="option3">1</option>
<option id="option4">2</option>
</select>
<div id="div3">a</div>
<div id="div4">b</div>
1和2分别控制a和b的显示和隐藏，而两个select菜单在同一页面上互不影响，就是选完一个不会影响另一个的状态，请问如何实现？我自己写的只能控制其中一个。。。 展开
<option id="option1" >1</option>
<option id="option2" >2</option>
</select>
<div id="div1">a</div>
<div id="div2">b</div>
<select id="select2">
<option id="option3">1</option>
<option id="option4">2</option>
</select>
<div id="div3">a</div>
<div id="div4">b</div>
1和2分别控制a和b的显示和隐藏，而两个select菜单在同一页面上互不影响，就是选完一个不会影响另一个的状态，请问如何实现？我自己写的只能控制其中一个。。。 展开
2个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{width:200px;height:200px;background:#CCC;margin:30px;}
{margin:30px;}
</style>
<script type="text/javascript">
window.onload = function(){
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
select1.onchange = function(){
if(this.value=='1'){
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
}else {
document.getElementById('div2').style.display = 'block';
document.getElementById('div1').style.display = 'none';
}
}
select2.onchange = function(){
if(this.value=='1'){
document.getElementById('div3').style.display = 'block';
document.getElementById('div4').style.display = 'none';
}else {
document.getElementById('div4').style.display = 'block';
document.getElementById('div3').style.display = 'none';
}
}
}
</script>
</head>
<body>
<select id="select1">
<option id="option1" >1</option>
<option id="option2" >2</option>
</select>
<br>
<div id="div1">div1#a</div>
<div id="div2" style="display:none;">div2#b</div>
<hr>
<select id="select2">
<option id="option3">1</option>
<option id="option4">2</option>
</select>
<br>
<div id="div3">div3#a</div>
<div id="div4" style="display:none;">div4#b</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS 演示代码</title>
<script>
onload = function() {
var sels = document.getElementsByTagName("select");
for (var i = 0; i < sels.length; i++) {
var sel = sels[i],
dom = sel.nextElementSibling;
sel.divs = [];
while ( !! dom && dom.tagName.toLowerCase() == 'div') {
sel.divs.push(dom);
dom = dom.nextElementSibling;
}
sel.onchange = function() {
for (var j = 0; j < this.divs.length; j++) {
this.divs[j].style.display = 'none';
}
this.divs[this.selectedIndex].style.display = 'block';
}
}
}
</script>
</head>
<body>
<select id="select1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div>a</div>
<div>b</div>
<div>c</div>
<select id="select2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
