xiaoquan_notes
/
mycode
/
show
/
select.htm

<!--用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进行显示，至此结束，谢谢观赏！-->