select下拉框change事件切换内容

最新推荐文章于 2024-03-25 09:05:57 发布

枫雨血痕

最新推荐文章于 2024-03-25 09:05:57 发布

阅读量4.9k

点赞数 1

分类专栏：前端 jQuery 文章标签： select 下拉框切换内容

本文链接：https://blog.csdn.net/lyxuefeng/article/details/105491116

版权

前端同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

<html>
<header>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</header>
<body>

<div class="box">
    <select class="switch">
        <option value="math">数学</option>
        <option value="chinese">语文</option>
        <option value="english">英语</option>
    </select>
</div>
<div id="math" class="course">
    数学老师：<input type="text">
</div>
<div id="chinese" class="course">
    语文老师：<input type="text">
</div>
<div id="english" class="course">
    英语老师：<input type="text">
</div>
</body>
<script src="/plugins/jquery/jquery-2.2.3.min.js"></script>
<script>
    //页面加载先执行一次
    switchBySelect();
    //下拉框change事件
    $(".switch").on("change",function () {
       switchBySelect();
    });
    function switchBySelect() {
        var v = $(".switch").val();//得到下拉框的value值
        console.log(v);
        $(".course").each(function (index,element) {
            if($(element).attr("id") == v){
                $(element).show();
            }else{
                $(element).hide();
            }
        });
    }
</script>
</html>