jQuery_select.html

唐渊
2023-12-01
<!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>
jQuery_select.html

相关阅读

相关文章

相关问答
