ASP.NET webform开发中基于Jquery,AJAX的三级联动

浏览数：33 / 时间：2015年06月09日

主要html代码

<select id="province">
        <option value="0">--请选择省份--</option>
    </select>
    <select id="city">
        <option value="0">--请选择城市--</option>
    </select>
    <select id="area">
        <option value="0">--请选择地区--</option>
    </select>

JQuery代码

<script type="text/javascript">
        $(document).ready(function () {
            $.post("lianxi.aspx", { file2: 1 }, function (result) {
                var province = result.split(‘|‘);
                var newoption;
                for (var i in province) {
                    newoption = new Option(province[i], province[i]);
                    $("#province")[0].options.add(newoption);
                }
            })
            $("#province").change(function () {
                $("#city")[0].options.length = 1;
                if ($("#province").val() == "0") {
                    return;
                }
                $.post("lianxi.aspx", { province: $("#province").val() }, function (result) {
                    var city = result.split(‘|‘); var newoption;
                    for (var i in city) {
                        newoption = new Option(city[i], city[i]);
                        $("#city")[0].options.add(newoption);
                    }
                })
            })
            $("#city").change(function () {
                $("#area")[0].options.length = 1;
                if ($("#city").val() == "0") {
                    return;
                }
                $.post("lianxi.aspx", { city: $("#city").val() }, function (result) {
                    var area = result.split(‘|‘); var newoption;
                    for (var i in city) {
                        newoption = new Option(area[i], area[i]);
                        $("#area")[0].options.add(newoption);
                    }
                })
            })
        })
    </script>

后台代码

 1 protected void Page_Load(object sender, EventArgs e)
 2         {
 3             if (Request.Form["file2"] != null)
 4             {
 5                 string sql = string.Format("select distinct province from proci");
 6                 DataTable dt = sqlhelper.helper.ExecuteQuery(sql);
 7                 string province = "";
 8                 for (int i = 0; i < dt.Rows.Count; i++)
 9                 {
10                     province += "|" + dt.Rows[i][0].ToString();
11                 }
12                 Response.Write(province.Substring(1));
13                 Response.End();
14             }
15             if (Request.Form["province"] != null)
16             {
17                 string province = Request.Form["province"].ToString();
18                 string sql2 = string.Format("select city from proci where province=‘{0}‘", province);
19                 DataTable dt2 = sqlhelper.helper.ExecuteQuery(sql2);
20                 string city = "";
21                 for (int j = 0; j < dt2.Rows.Count; j++)
22                 {
23                     city += "|" + dt2.Rows[j][0].ToString();
24                 }
25                 Response.Write(city.Substring(1));
26                 Response.End();
27             }
28             if (Request.Form["city"] != null)
29             {
30                 string city = Request.Form["city"].ToString();
31                 string sql2 = string.Format("select dis from abcd where city=‘{0}‘", city);
32                 DataTable dt2 = sqlhelper.helper.ExecuteQuery(sql2);
33                 string area = "";
34                 for (int j = 0; j < dt2.Rows.Count; j++)
35                 {
36                     area += "|" + dt2.Rows[j][0].ToString();
37                 }
38                 Response.Write(area.Substring(1));
39                 Response.End();
40             }
41         }