C#+Jquery实现省地市三级联动下拉_c#使用jquery城市选择器-优快云博客

本文详细介绍了如何在网页中实现省市区联动下拉选择框的功能，包括前端事件监听与AJAX请求，以及后端数据处理逻辑，确保用户选择的地区能够实时更新下级选项。

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

//前台：

  <div>
       省份： <asp:DropDownList ID="ddlTest1" runat="server" ></asp:DropDownList>
       城市： <asp:DropDownList ID="ddlTest2" runat="server">
        <asp:ListItem Text="请选择" Value=""></asp:ListItem>
       </asp:DropDownList>
    </div>

//JQ：

    <script>
        $(function () {
        //省地市下拉联动
            $("#ddlTest1").change(function () {
                $.ajax({
                    url: "DataPage.aspx?id=" + $("#ddlTest1").val(),
                    success: function (data) {
                        //alert(data);
                         $("#ddlTest2").empty();
                        $("#ddlTest2").append("<option value=''>请选择</option>") ;
                        var lst = data.split('|');
                        for (var i = 0; i < lst.length; i++) {
                            $("#ddlTest2").append("<option value='" + lst[i].split(',')[0] + "'>" + lst[i].split(',')[1] + "</option>")
                        }
                    }
                });
            });

        });
    </script>

//DataPage后台：

if (Request["id"] != null)
                {
                    string sql = "select * from AreaInfo where CONVERT(varchar(10), parentId)='" + Request["id"].ToString() + "'";
                    DataTable dt = db.SelectData(sql);
                    string str = "";
                    for (int i = 0; i < dt.Rows.Count; i++)
                    { 
                        //1,湖北省|2,xxx|4,xxx
                        str += dt.Rows[i]["id"].ToString() + "," + dt.Rows[i]["areaName"].ToString() + "|";
                    }
                    if (str != "")
                    {
                        str = str.TrimEnd('|');
                    }
                    Response.Write(str);
                    Response.End();
                }