ASP.NET webform開發中基於Jquery,AJAX的三級聯動

標籤：style   blog   io   ar   color   os   sp   java   for   

主要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         }

 

ASP.NET webform開發中基於Jquery,AJAX的三級聯動