下拉列表用JS控制指定的div显示、隐藏

最新推荐文章于 2022-07-29 15:50:29 发布

chuge6367

最新推荐文章于 2022-07-29 15:50:29 发布

阅读量222

点赞数

原文链接：https://my.oschina.net/huewenhua/blog/681531

版权

<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>

转载于:https://my.oschina.net/huewenhua/blog/681531