根据角色的选择获取对应信息选择器事件 on()

最新推荐文章于 2021-06-03 04:19:16 发布

缤纷落叶之忠

最新推荐文章于 2021-06-03 04:19:16 发布

阅读量367

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/x1207008324/article/details/73695135

jQuery 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的动态模型窗口，通过点击按钮显示隐藏的模型层，并根据预定义数组动态填充下拉选择框。当用户改变下拉框选项时，对应的值会显示在文本区域内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <script src="jquery.js"></script>
    <style>
        .container{
            position:relative;
            width: 100%;
            height: 500px;
        }
        .model{
            width: 100%;
            height: 500px;
            background-color: #aaa;
            /*                opacity: 0.2;*/
            position:absolute;
            left:0;
            top:0;
            display:none;
        }
        .modelClass{
            background-color: #fff;
            width:500px;

            padding:5px 10px;
            margin:135px auto;
            border:1px  solid #ddd;
            border-radius:4px;
        }
    </style>
</head>
<body>
    <div id="container" class="container">
        <button id="modelBtn">click</button> 
        <div class="model">
            <div class="modelClass">
                角色：
                <select id="roles">
                    <!--<option value="1" selected="selected">用户</option>
                    <option value="2">管理员</option>
                    <option value="3">其他</option>-->
                </select>
                信息：<textarea id="textarea"></textarea>
            </div>
        </div>
    </div>
    <script>
        $("#modelBtn").on("click", function () {
            $(".model").css("display", "block")
        });
        var arr = ["tom", "sccot", "marry"];
        $.each(arr, function (index, value) {
            var option = new Option(value, index);
            $("#roles").append(option);
        })
        $("#roles").on("change", function () {
            if ($("#roles option:selected"))
                $("#textarea").html($("#roles option:selected").html());
        })
    </script>