Asp.Net+jQuery如何实现省市二级联动功能的方法详解-Tutorial C#.Net-php.cn

Rumah

pembangunan bahagian belakang

Tutorial C#.Net

Asp.Net+jQuery如何实现省市二级联动功能的方法详解

Jun 04, 2017 am 09:49 AM

asp.net jquery

这篇文章主要介绍了jQuery+Asp.Net实现省市二级联动功能的方法,涉及asp.net数据库读取与字符串转换相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery+Asp.Net实现省市二级联动功能的方法。分享给大家供大家参考，具体如下：

页面html:

&lt;%@ Page Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot; CodeFile=&quot;ddlAjax.aspx.cs&quot; Inherits=&quot;ThreeAjaxDrop_ddlAjax&quot; %&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head runat=&quot;server&quot;&gt;
&lt;title&gt;DropDownList三级联动&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
*{margin:0; padding:0;}
body{font-size:12px; font-family:Arial @宋体;}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;../js/jquery-1.4.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
//加载完成后绑定省份数据
$.getJSON(&quot;Default.aspx&quot;, function(data) { //data的数据格式[{&quot;text&quot;:&quot;北京&quot;,&quot;value&quot;:&quot;0001&quot;},{&quot;text&quot;:&quot;江西&quot;,&quot;value&quot;:&quot;0031&quot;}]
//alert(data[0].text+&quot;|&quot;+data[0].value);
$.each(data, function(index, value) {
//alert(value.text + &quot;|&quot; + value.value);
$(&quot;#selProvince&quot;).append(&quot;&lt;option value=&#39;&quot; + value.value + &quot;&#39;&gt;&quot; + value.text + &quot;&lt;/option&gt;&quot;);
});
});
//省份的值改变，则要绑定出城市下拉框
$(&quot;#selProvince&quot;).change(function(){
document.getElementById(&quot;selArea&quot;).options.length=1; //先清掉县下拉框的的数据
document.getElementById(&quot;selCity&quot;).options.length=1; //先清掉城市下拉框的的数据
$.getJSON(&quot;HandlerDropDownAjax.ashx&quot;,{&quot;type&quot;:&quot;city&quot;,&quot;fid&quot;:$(this).val()},function(data){
$.each(data, function(index, value) {
$(&quot;#selCity&quot;).append(&quot;&lt;option value=&#39;&quot; + value.value + &quot;&#39;&gt;&quot; + value.text + &quot;&lt;/option&gt;&quot;);
});
});
});
//城市下拉框的值改变
$(&quot;#selCity&quot;).change(function(){
document.getElementById(&quot;selArea&quot;).options.length=1; //先清掉县下拉框的的数据
$.getJSON(&quot;HandlerDropDownAjax.ashx&quot;,{&quot;type&quot;:&quot;area&quot;,&quot;fid&quot;:$(this).val()},function(data){
$.each(data, function(index, value) {
$(&quot;#selArea&quot;).append(&quot;&lt;option value=&#39;&quot; + value.value + &quot;&#39;&gt;&quot; + value.text + &quot;&lt;/option&gt;&quot;);
});
});
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
&lt;p&gt;
三级联动：&lt;select id=&quot;selProvince&quot;&gt;
&lt;option value=&quot;选择省份&quot;&gt;==选择省份==&lt;/option&gt;
&lt;/select&gt; &lt;select id=&quot;selCity&quot;&gt;&lt;option&gt;==选择城市==&lt;/option&gt;&lt;/select&gt;&amp; amp;nbsp; &lt;select id=&quot;selArea&quot;&gt;&lt;option&gt;==选择县==&lt;/option&gt;&lt;/select&gt;
&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

asp.net部分:

(1)Default.aspx.cs

public partial class ThreeAjaxDrop_Default : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    string sql = &quot;select * from province&quot;;
    string strTemp = &quot;\&quot;text\&quot;:\&quot;{0}\&quot;,\&quot;value\&quot;:\&quot;{1}\&quot;&quot;; //构造格式字符串 {&quot;text&quot;:&quot;北京&quot;,&quot;value&quot;:&quot;00001&quot;}
    StringBuilder sb = new StringBuilder();
    OleDbDataReader reader = OleDBHelper.ExecuteReader(sql);
    while (reader.Read())
    {
      string str1 = string.Format(strTemp, reader[&quot;province&quot;].ToString(), reader[&quot;provinceID&quot;].ToString());
      sb.Append(&quot;{&quot;+str1+&quot;},&quot;);
    }
    reader.Close();
    string json = sb.ToString();
    Response.Write(&quot;[&quot;+json.Substring(0,json.Length-1)+&quot;]&quot;);
  }
}

Salin selepas log masuk

(2)HandlerDropDownAjax.ashx

public class HandlerDropDownAjax : IHttpHandler {
  public void ProcessRequest (HttpContext context) {
    if (context.Request.QueryString[&quot;type&quot;] != null &amp;&amp; context.Request.QueryString[&quot;fid&quot;] != null)
    {
      string type = context.Request.QueryString[&quot;type&quot;].ToString(); //主要用于识别是查询city还是area表
      string fid = context.Request.QueryString[&quot;fid&quot;].ToString();   //城市或区域的父ID
      string sql = &quot;select * from &quot; + type + &quot; where father=&#39;&quot; + fid + &quot;&#39;&quot;;
      //构造数据的类型[{&quot;text&quot;:&quot;南昌&quot;,&quot;value&quot;:&quot;0001&quot;},{&quot;text&quot;:&quot;上饶&quot;,&quot;value&quot;:&quot;0002&quot;}]
      //string strTemp = &quot;{\&quot;text\&quot;:\&quot;{0}\&quot;,\&quot;value\&quot;:\&quot;{1}\&quot;}&quot;;//这里犯了个错误：直接这样构造会出错，因为大括号里又有格式大括号，解析会出错
      string strTemp = &quot;\&quot;text\&quot;:\&quot;{0}\&quot;,\&quot;value\&quot;:\&quot;{1}\&quot;&quot;; //构造格式字符串 {&quot;text&quot;:&quot;北京&quot;,&quot;value&quot;:&quot;00001&quot;}
      StringBuilder sb = new StringBuilder();
      OleDbDataReader reader = OleDBHelper.ExecuteReader(sql);
      while (reader.Read())
      {
        string str1 = string.Format(strTemp, reader[2].ToString(), reader[1].ToString());
        sb.Append(&quot;{&quot; + str1 + &quot;},&quot;); //两边的大括号格式化后加上
      }
      reader.Close();
      string json = sb.ToString();
      context.Response.Write(&quot;[&quot; + json.Substring(0, json.Length - 1) + &quot;]&quot;); //Substring的作用是去掉最后一个&#39;逗号&#39;
    }
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
}

Salin selepas log masuk

Atas ialah kandungan terperinci Asp.Net+jQuery如何实现省市二级联动功能的方法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn