点击select选项，显示与当前option对应的模块

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>

最后编辑于：2017.12.03 07:53:48

点击select选项，显示与当前option对应的模块

推荐阅读更多精彩内容