jQuery_select.html

最新推荐文章于 2021-06-11 13:34:53 发布

学无止境慢慢来

最新推荐文章于 2021-06-11 13:34:53 发布

阅读量168

点赞数

分类专栏： html jQuery

原文链接：https://www.w3school.com.cn/tags/tag_select.asp

版权

jQuery 同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

html

29 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery_select</title>
    <script src="lib/jquery/jquery-3.2.1.js"></script>
</head>
<body>

<label>
    汽车品牌：
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi" selected="selected">Audi</option>
    </select>
</label>

<script>
    /*参考：
        https://www.w3school.com.cn/tags/tag_select.asp
        https://www.cnblogs.com/xiuxiu123456/p/8478734.html

    知识点：
        1.option value的值只能是字符串类型的，即使给成数字，比如：1，
            当获取该值时，获取到的也是字符串类型的值。*/

    // 文档加载就绪。
    $(function () {
        let $select = $("select");
        // select添加选项。
        $select.append('<option value="a">a</option>');
        // select change事件。
        $select.change(function () {
            console.log($(this).val());
            // a
            // audi

            // 清空 下拉列表。
            // 参考：https://www.cnblogs.com/hailexuexi/p/6708110.html
            if ($(this).val() === "a") {
                $(this).empty();
            }
        })
    });
</script>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_select.html

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>select</title> <script src="lib/jquery/jquery-3.2.1.js"></script>&l...
复制链接

扫一扫