zoukankan      html  css  js  c++  java

  • jQuery实现三级联动

    本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果，其他二级、三级或多级联动也可以按照此方法完成。

    本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果，其他二级、三级或多级联动也可以按照此方法完成。

    文章中涉及到的数据表为City,为方便管理。

    设计此表如下

    ID：自增长字段

    City_Name:城市名称

    City_Code:城市代码

    我们根据城市代码来查询省、市、区。城市代码结构大致如下：

    内蒙古：150000，呼和浩特：150100，新城区：150101。

    其他地区代码与此一样，省级为省级编号+0000，市级为省级编号+市级编号+00，地区为省级编号+市级编号+地区编号。

    City.ASPX代码为：

     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head runat="server">
    4.     <title>jQuery + ASP.NET实现三级联动</title>
    5.     <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    6.     <style type="text/css">
    7.         #dpCity{ display:none; position:relative;}
    8.         #dpArea{ display:none;position:relative;}
    9.     </style>
    10. </head>
    11. <body>
    12.     <div>
    13.         省：<asp:DropDownList ID="dpProvince" runat="server"></asp:DropDownList>&nbsp;&nbsp;
    14.         市：<asp:DropDownList ID="dpCity" runat="server"></asp:DropDownList>&nbsp;&nbsp;
    15.         区：<asp:DropDownList ID="dpArea" runat="server"></asp:DropDownList>
    16.     </div>
    17. </body>
    18. </html>

    JS代码：

     
    1. jQuery(document).ready(function () {
    2.             var dp1 = jQuery("#dpProvince");
    3.             var dp2 = jQuery("#dpCity");
    4.             var dp3 = jQuery("#dpArea");
    5.             //填充省的数据
    6.             loadAreas("", "dpProvince");
    7.             //给省绑定事件，触发事件后填充市的数据
    8.             jQuery(dp1).bind("change keyup", function () {
    9.                 var provinceID = dp1.attr("value");
    10.                 loadAreas(provinceID, "dpCity");
    11.                 dp2.fadeIn("slow");
    12.             });
    13.             //给市绑定事件，触发事件后填充区的数据
    14.             jQuery(dp2).bind("change keyup", function () {
    15.                 var cityID = dp2.attr("value");
    16.                 loadAreas(cityID, "dpArea");
    17.                 dp3.fadeIn("slow");
    18.             });
    20.         });
    21.         function loadAreas(val, item) {
    22.             jQuery.ajax({
    23.                 type: "post",
    24.                 url: "CityLoader.asmx/GetCityList",
    25.                 data: {
    26.                     code: val,
    27.                     a: Math.random()
    28.                 },
    29.                 error: function () {
    30.                     return false;
    31.                 },
    32.                 success: function (data) {
    33.                     var i;
    34.                     var json = eval(data);
    35.                     jQuery("#" + item).append("<option value='' selected='selected'>请选择</option>");
    36.                     for (i = 0; i < json.length; i++) {
    37.                         jQuery("#" + item).append(jQuery("<option></option>").val(json[i].c_code).html(json[i].c_name));
    38.                     };
    39.                 }
    40.             });
    41.         }

    后台代码：

     
    1. //实例类
    2. public class CityModel
    3.     {
    4.         int _id;
    5.         string _cityname;
    6.         string _citycode;
    8.         public int ID
    9.         {
    10.             set { _id = value; }
    11.             get { return _id; }
    12.         }
    14.         public string CityName
    15.         {
    16.             set { _cityname = value; }
    17.             get { return _cityname; }
    18.         }
    20.         public string CityCode
    21.         {
    22.             set { _citycode = value; }
    23.             get { return _citycode; }
    24.         }
    25.     }
    27. //DAL层，返回DataTable，使用通用SqlHelper
    28. public DataTable CityList(string pcode)
    29.         {
    30.             string SQL = "SELECT * FROM city WHERE 1=1";
    31.             if (!string.IsNullOrEmpty(pcode))
    32.             {
    33.                  if (pcode.Substring(2, 2) != "00")
    34.                 {
    35.                     SQL = SQL + " AND RIGHT(citycode,2)<>'00' AND LEFT(citycode,4)=LEFT(@pcode,4)";
    36.                 }
    37.                 else
    38.                 {
    39.                     SQL = SQL + " AND RIGHT(citycode,2)='00' AND LEFT(RIGHT(citycode,4),2)<>'00' AND LEFT(citycode,2)=LEFT(@pcode,2)";
    40.                 }
    41.             }
    42.             else
    43.             {
    44.                 SQL = SQL + " AND LEFT(citycode,2)<>'00' AND RIGHT(citycode,4)='0000'";
    45.             }
    46.             SQL = SQL + " ORDER BY sorts ASC";
    47.             SqlParameter[] Param ={
    48.                 new SqlParameter("@pcode",pcode)
    49.             };
    50.             using (SqlConnection conn = new SqlConnection(DBUtility.SqlHelper.ConnectionStringLocalTransaction))
    51.             {
    52.                 DataSet ds = DBUtility.SqlHelper.ExecuteDataSet(conn, CommandType.Text, SQL, Param);
    53.                 return ds.Tables[0];
    54.             }
    55.         }
    57. //BLL层，返回City的泛型列表
    58.  public List<CityModel> CityList(string code)
    59.         {
    60.             List<CityModel> list = new List<CityModel>();
    61.            DAL. CityDAL cd = new DAL.CityDAL();
    62.             DataTable dt = cd.CityList(code);
    63.             if (dt.Rows.Count > 0)
    64.             {
    65.                 for (int i = 0; i < dt.Rows.Count; i++)
    66.                 {
    67.                     CityModel cm = new CityModel();
    68.                     cm.ID = int.Parse(dt.Rows[i]["id"].ToString());
    69.                     cm.CityName = dt.Rows[i]["cityname"].ToString();
    70.                     cm.CityCode = dt.Rows[i]["citycode"].ToString();
    71.                     list.Add(cm);
    72.                 }
    73.             }
    74.             return list;
    75.         }

    CityLoader.asmx：

     
    1. /// <summary>
    2.     /// CityLoader 的摘要说明
    3.     /// </summary>
    4.     [WebService(Namespace = "http://tempuri.org/")]
    5.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    6.     [System.ComponentModel.ToolboxItem(false)]
    7.     // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
    8.     // [System.Web.Script.Services.ScriptService]
    9.     public class CityLoader : System.Web.Services.WebService
    10.     {
    12.         [WebMethod]
    13.         public void GetCityList(string code)
    14.         {
    15.             CityBLL cb = new CityBLL();
    16.             StringBuilder sb = new StringBuilder();
    17.             List<CityModel> cm = cb.CityList(code);
    18.             sb.Append("[");
    19.             if (cm.Count > 0)
    20.             {
    21.                 for (int i = 0; i < cm.Count; i++)
    22.                 {
    23.                     CityModel model = cm[i];
    24.                     sb.Append("{");
    25.                     sb.AppendFormat(@"""c_name"":""{0}"",", model.CityName);
    26.                     sb.AppendFormat(@"""c_code"":""{0}""", model.CityCode);
    27.                     sb.Append("}");
    28.                     if (i < cm.Count - 1)
    29.                     {
    30.                         sb.Append(",");
    31.                     }
    32.                 }
    33.             }
    34.             sb.Append("]");
    35.             System.Web.HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.GetEncoding("utf-8");
    36.             System.Web.HttpContext.Current.Response.Write(sb.ToString());
    37.         }
    39.     }
  • 相关阅读:
    请求页面
    获取iframe内的元素
    jquery 判断checkbox是否被选中问题
    bootStrap 模板地址
    content
    基于JS的文本验证
    canvas 移动光速特效-
    Swift 语法
    Xcode 8 Swift 类似插件方法
    js整频滚动展示效果（函数节流鼠标滚轮事件）
  • 原文地址：https://www.cnblogs.com/goody9807/p/2523972.html
Copyright © 2011-2022 走看看