选择器事件 on()

最新推荐文章于 2023-02-02 19:21:08 发布

缤纷落叶之忠

最新推荐文章于 2023-02-02 19:21:08 发布

阅读量363

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/x1207008324/article/details/78546311

版权

jQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery 选择器</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../jQuery/jquery.min.js"></script>
        <style>
            .container{
                position: relative;
                width: 100%;
                height: 500px;
            }
            .model{
                width: 100%;
                height: 500px;
                background-color: #aaa;
                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>
    </body>
</html>