无刷新省市三联动（源码）

最新推荐文章于 2020-05-07 21:43:18 发布

原创最新推荐文章于 2020-05-07 21:43:18 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

AJAX 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的省市县三级联动下拉选择器。该选择器通过调用WebService获取数据库中的省份、城市和区县信息，并动态填充到对应的下拉框中。当用户选择省份时，会自动加载对应的城市；选择城市后，则加载相应的区县。

***************************************html页*******************************************************

<title></title>
    <style type="text/css">
    #city,#area{display:none;margin-left:10px;}
    select{float:left};
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "WebService2.asmx/GetProv",
                data: "{}",
                success: function (result) {
                    var strprov;
                    for (var i = 0; i < result.d.length; i++) {
                        var str = result.d[i];
                        strprov += "<option value='" + str.split('-')[0] + "'>" + str.split('-')[1] + "</option>";
                    }
                    $('#province').append(strprov);
                }
            })
            $('#province').change(function () {
                $('#city').css('display', 'block');
                $('#area').css('display', 'none');
                $('#city option:gt(0)').remove();
                $('#area option:gt(0)').remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService2.asmx/GetCity",
                    data: "{citystr:" + $(this).val() + "}",
                    success: function (result) {
                        var strprov;
                        for (var i = 0; i < result.d.length; i++) {
                            var str = result.d[i];
                            strprov += "<option value='" + str.split('-')[0] + "'>" + str.split('-')[1] + "</option>";
                        }
                        $('#city').append(strprov);
                    }
                })
            })
            $('#city').change(function () {
                $('#area').css('display', 'block');
                $('#area option:gt(0)').remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService2.asmx/GetArea",
                    data: "{areastr:" + $(this).val() + "}",
                    success: function (result) {
                        var strprov;
                        for (var i = 0; i < result.d.length; i++) {
                            var str = result.d[i];
                            strprov += "<option value='" + str.split('-')[0] + "'>" + str.split('-')[1] + "</option>";
                        }
                        $('#area').append(strprov);
                    }
                })
            })
        })
    </script>
</head>
<body>
<select id="province">
<option>----请选择省----</option>
</select>
<select id="city">
<option>----请选择市----</option>
</select>
<select id="area">
<option>----请选择县----</option>
</select>
</body>

*************************************WebService2.asmx*****************************************

string connectionString = ConfigurationManager.ConnectionStrings["sqlservercon"].ConnectionString;
        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        [WebMethod]
        public List<string> GetProv()
        {
            List<string> strlist = new List<string>();
            string connectionString = ConfigurationManager.ConnectionStrings["sqlservercon"].ConnectionString;
            SqlConnection conn = new SqlConnection(connectionString);
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = "select provinceID,provincename FROM province";
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            cmd.Dispose();
            conn.Dispose();
            foreach (DataRow row in dt.Rows)
            {
                strlist.Add(row["provinceID"].ToString() + "-" + row["provincename"]);
            }
            return strlist;
        }
        [WebMethod]
        public List<string> GetCity(string citystr)
        {
            List<string> strlist = new List<string>();
            string connectionString = ConfigurationManager.ConnectionStrings["sqlservercon"].ConnectionString;
            SqlConnection conn = new SqlConnection(connectionString);
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = "select cityID,cityname FROM city WHERE father=@citystr";
            cmd.Parameters.AddWithValue("@citystr", citystr);
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            cmd.Dispose();
            conn.Dispose();
            foreach (DataRow row in dt.Rows)
            {
                strlist.Add(row["cityID"].ToString() + "-" + row["cityname"].ToString());
            }
            return strlist;
        }
        [WebMethod]
        public List<string> GetArea(string areastr)
        {
            List<string> strlist = new List<string>();
            string connectionString = ConfigurationManager.ConnectionStrings["sqlservercon"].ConnectionString;
            SqlConnection conn = new SqlConnection(connectionString);
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = "select areaID,areaname FROM area WHERE father=@areastr";
            cmd.Parameters.AddWithValue("@areastr", areastr);
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            cmd.Dispose();
            conn.Dispose();
            foreach (DataRow row in dt.Rows)
            {
                strlist.Add(row["areaID"].ToString() + "-" + row["areaname"].ToString());
            }
            return strlist;
        }