点击select选项，显示与当前option对应的模块
2016-07-08 本文已影响203人
nickfox
1、选择select的事件是chenge()事件
2、实现功能的关键在于选择select的option时，如何把该option和相对应的模块建立联系。具体实现看下面的代码
3、感谢jQuery强大方便的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.def div { display: none;}
#div1 { display: block; }
</style>
</head>
<body>
<select name="abc">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option>f</option>
</select>
<div class="def">
<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>
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script>
$("select[name='abc']").change(function(){
var oNum = Number($("select[name='abc'] option:selected").index())+1;
$(".def > div").hide();
$("#div"+ oNum).show();
})
</script>
</body>
</html>
