版权声明：小全笔记 https://blog.csdn.net/qq_43102934/article/details/88386496
<!--用select下拉框控制指定的div进行显示，其他层隐藏，用js实现如下-->
<style type="text/css">
div{display:none;}
select {
height: 24PX;
width: 76px;
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
border: 1px solid #8bd1b7;
/*很关键：将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("../static/imgs/select_down.png") no-repeat right 6px center ;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
</style>
<body>
<select name="select1" id="select1">
<option name="option1" id="option1" value="Home">首页</option>
<option name="option2" id="option2" value="blog">博客</option>
<option name="option3" id="option3" value="College">学院</option>
<option name="option4" id="option4" value="Forum">论坛</option>
<option name="option5" id="option5" value="answer">问答</option>
</select>
<div id="div1">首页</div>
<div id="div2">博客</div>
<div id="div3">学院</div>
<div id="div4">论坛</div>
<div id="div5">问答</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>
<!--用select下拉框控制指定的div进行显示，至此结束，谢谢观赏！-->做出来是为了方便小伙伴们学习和实用，同时锻炼自己的能力哈！不足之处，还去各位大佬多多指点
©小全笔记 地址：https://gitee.com/xiaoquanbiji/xiaoquan_notes/blob/master/mycode/show/select.htm