jquery实现无刷新省市县三级绑定（包含只有提交的情况和修改信息绑定后再提交的情况）

来源：互联网发布：mac xp7升级win7 编辑：程序博客网时间：2024/06/16 12:32

此前做过类似的三级绑定，但在修改信息的时候，绑定然后再提交，下拉框的值总会消失，或者就是回传以后，下拉框的值也会消失，这两天又遇到同样的问题，所以下决心把这个彻底搞定。

本实例用的是jquery+ashx实现。

第一种情况，只有提交的情况。

aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Area.aspx.cs" Inherits="Area" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>无标题页</title>    <script type="text/javascript" src="js/jquery.min.js"></script>    <script type="text/javascript">       $(document).ready(function(){          doChange(null,"province","0");       });       function doChange(id,sub_id,id_value)       {          $("#"+sub_id).empty();          var p_id=id_value;          if(id!=null)          {             p_id=$("#" + id).val();          }          var options="<option value=\"\">请选择</option>";          if(p_id!="")          {              $.getJSON("GetArea.ashx",{pid:p_id},function(data){                 $.each(data.items,function(i,item){                    options += "<option value=\"" + item.value + "\">" + item.text + "</option>";                 });                 $("#" + sub_id).append(options);              });          }          else          {             $("#" + sub_id).append(options);          }       }    </script></head><body>    <form id="form1" runat="server">    <div>    <select name="province" id="province" onchange="doChange('province','city','0','')"></select>省    <select name="city" id="city" onchange="doChange('city','area','0','')"></select>市    <select name="area" id="area"></select>县    </div>    </form></body></html>

三个select分别用于显示省，市，县

以下是GetArea.ashx代码

<%@ WebHandler Language="C#" Class="GetArea" %>using System;using System.Web;using System.Data;using GeodonHelper;public class GetArea : IHttpHandler {        public void ProcessRequest (HttpContext context) {        string startValue = "{\"items\":[";        string endValue = "]}";        if (context.Request.QueryString["pid"] == null || !ValidateHelper.IsInteger(context.Request.QueryString["pid"].ToString()))        {            context.Response.Write(startValue + "{value:\"\",text:\"参数错误\"}" + endValue);            context.Response.End();        }        else        {            int pid = int.Parse(context.Request.QueryString["pid"].ToString());            string middleValue = "";            //DBHelper是我自己写的数据库操作类库，目前支持MSSQL MySql，Access，SQlite，此处的代码可以换成你自己的数据库操作代码。

            DBHelper sh = DBHelper.CreateInstance();

            string sql = "select Id,AreaName from Area where ParentId=@pid";            sh.Params.Add("@pid", pid);            DataTable tb = sh.ExecuteDataTable(sql);            int count = tb.Rows.Count;            if (count == 0)            {                context.Response.Write(startValue + "{value:\"\",text:\"没有数据\"}" + endValue);                context.Response.End();            }            else            {                for (int i = 0; i < count; i++)                {                    middleValue += ",{value:\"" + tb.Rows[i]["Id"].ToString().Trim() + "\",text:\"" + tb.Rows[i]["AreaName"].ToString().Trim() + "\"}";                }                middleValue = middleValue.Substring(1);                context.Response.Write(startValue + middleValue + endValue);                context.Response.End();            }        }    }     public bool IsReusable {        get {            return true;        }    }}

提交数据的时候用Request["province"],Request["city"],Request["area"]

第二种情况：修改信息先从数据库获取省市县编号，然后绑定三个select，然后再提交数据.

aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Edit.aspx.cs" Inherits="Edit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>无标题页</title>    <script type="text/javascript" src="js/jquery.min.js"></script>    <script type="text/javascript">       $(document).ready(function(){          GetProvince();       });       function GetProvince()       {          var province=$("#province");          province.empty();          var options="<option value=\"\">请选择</option>";          $.getJSON("GetArea.ashx",{pid:"0"},function(data){             $.each(data.items,function(i,item){                options += "<option value=\"" + item.value + "\">" + item.text + "</option>";             });             province.append(options);             province.val("<%=province %>");             GetCity();          });       }       function GetCity()       {          var city=$("#city");          city.empty();          var p_id=$("#province").val();          var options="<option value=\"\">请选择</option>";          if(p_id!="")          {              $.getJSON("GetArea.ashx",{pid:p_id},function(data){                 $.each(data.items,function(i,item){                    options += "<option value=\"" + item.value + "\">" + item.text + "</option>";                 });                 city.append(options);                 city.val("<%=city %>");                 GetArea();              });          }          else          {             city.append(options);             GetArea();          }                 }       function GetArea()       {          var area=$("#area");          area.empty();          var p_id=$("#city").val();          var options="<option value=\"\">请选择</option>";          if(p_id!="" && p_id!=null)          {              $.getJSON("GetArea.ashx",{pid:p_id},function(data){                 $.each(data.items,function(i,item){                    options += "<option value=\"" + item.value + "\">" + item.text + "</option>";                 });                 area.append(options);                 area.val("<%=area %>");              });          }          else          {             area.append(options);          }       }    </script></head><body>    <form id="form1" runat="server">    <div>    <select name="province" id="province" onchange="GetCity()"></select>省    <select name="city" id="city" onchange="GetArea()"></select>市    <select name="area" id="area"></select>县    </div>    <asp:Button ID="btn_submit" runat="server" Text="提交表单"         onclick="btn_submit_Click" />    <br />    <asp:Label ID="lbl_msg" runat="server"></asp:Label>    </form></body></html>

因为要为每个select赋值，而这个赋值又只能在ajax加载成功之后进行，所以我采取的办法是写三个方法，分别用于加载省，市，县

下面是aspx.cs代码

using System;using System.Collections;using System.Configuration;using System.Data;using System.Linq;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;using GeodonHelper;public partial class Edit : System.Web.UI.Page{    public string province = "", city = "", area = "";    protected void Page_Load(object sender, EventArgs e)    {        if (Request.QueryString["id"] != null)        {            province = "97";            city = "279";            area = "1469";        }    }    protected void btn_submit_Click(object sender, EventArgs e)    {        lbl_msg.Text = Request["province"] + "&" + Request["city"] + "&" + Request["area"];    }}

ajax加载数据用的还是GetArea.ashx。　