Jquery完成连动下拉列表

最新推荐文章于 2022-05-08 16:14:06 发布

我的大男子主义

最新推荐文章于 2022-05-08 16:14:06 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：数据库 java Dao

本文链接：https://blog.csdn.net/lf1949/article/details/123880688

web前端专栏收录该内容

13 篇文章

订阅专栏

该代码示例展示了如何使用Jquery动态填充省份和对应城市的下拉列表，并实现当选择省份时，城市下拉列表自动更新。通过遍历省份和城市数组，创建并添加选项元素，实现了级联选择的效果。

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

成果要求

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表</title>
    <script src="../jQuery/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
            var provinces=["黑龙江","吉林","辽宁"];
            var citys=[["哈尔滨","鹤岗","齐齐哈尔"],["四平","辽源","通化","吉林"],["沈阳","大连"]];
            var p=$("#province");
            for (var i=0;i<provinces.length;i++){
                var div=$("<option>");
                div.append(provinces[i]);
                p.append(div);
            }
            p.change(function (){
                $("#city").empty();
                var proid=-1;
                for (var i=0;i<provinces.length;i++){
                    if (this.value==provinces[i]){
                        proid=i;
                    }
                }

                for (var i=0;i<citys[proid].length;i++){
                    var div1=$("<option>");
                    div1.append(citys[proid][i]);
                    $("#city").append(div1);
                }
            })

        })
    </script>

</head>
<body>

<div align="center">
    <select id="province" style="width: 100px">
        <option></option>

    </select>省
    <select id="city" style="width: 100px">

    </select>市
</div>

</body>
</html>