三级联动

最新推荐文章于 2021-10-26 11:18:07 发布

原创最新推荐文章于 2021-10-26 11:18:07 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery实现的省市县三级联动下拉选择器。该选择器通过Ajax请求从服务器获取省市县数据，并动态填充到对应的下拉列表中。当用户选择省时，会自动加载对应的市列表；选择市时，则加载对应的县列表。

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

联动的页面

$.get("ProviceHandler.ashx", function (result) {
//alert(result);

//console.log(result);

var sub = "";

var jsonarry = JSON.parse(result);

for (var i = 0; i < jsonarry.length; i++) {

                    sub += "<option value=" + jsonarry[i].Id + ">" + jsonarry[i].Name + "</option>";
                }
                $("#provace").html(sub);
            });
            //给下拉列表注册改变事件
            $("#provace").change(function () {
                //获取id
                //alert($("#provace").val());
                //获取文本
               // alert($("#provace").find("option:selected").html());
                //通过省id去查询数据库
                $.get("CityHandler.ashx", { proviceId: $("#provace").val() }, function (result) {

                    console.log(result);
                    //需要把json转化成字符串
                    var sub = "";

var jsonarry = JSON.parse(result);

for (var i = 0; i < jsonarry.length; i++) {

                        sub += "<option value=" + jsonarry[i].Id + ">" + jsonarry[i].Name + "</option>";
                    }
                    $("#Select1").html(sub);
                });
                //
                $("#Select1").change(function () {
                    $.get("XuanHandler.ashx", { CityId: $("#Select1").val() }, function (result) {

                        console.log(result);
                        //需要把json转化成字符串
                        var sub = "";

var jsonarry = JSON.parse(result);

for (var i = 0; i < jsonarry.length; i++) {

                            sub += "<option value=" + jsonarry[i].Id + ">" + jsonarry[i].Name + "</option>";
                        }
                        $("#Select2").html(sub);
                    });
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    省：<select id="provace">

</select>
市：<select id="Select1">

</select>
县：<select id="Select2">

      </select>
    </div>
    </form>
</body>