jQueryJSON 无刷新三级联动

 

 

 

 

  1  <asp:DropDownList ID="ddl1" runat="server" Width="100px" ></asp:DropDownList>
  2  <asp:DropDownList ID="ddl2" runat="server" Width="100px" ></asp:DropDownList>
  3 
  4  <asp:DropDownList ID="ddl3" runat="server" Width="100px" ></asp:DropDownList>
  5 
  6 js:
  7 
  8  <script src="js/jquery-1.4.2.min.js" type="text/javascript" ></script>
  9     
 10     <script type="text/javascript">
 11 
 12         $(document).ready(function () {        
 13             GetA();
 14             $("#ddl1").change(function () { GetB();  });          
 15             $("#ddl2").change(function () { GetC();  });         
 16         });      
 17         
 18     function GetA()
 19     {
 20         $("#ddl1").html("");
 21         $("#ddl1").append("<option value='-1' selected='selected'>请选择...</option>");
 22         //$("select[name$=ddl1] > option:selected").remove();
 23         var strId = 0;
 24         $.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
 25          for (var i = 0; i < data.length; i++) {
 26              $("select[name$=ddl1]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
 27          };
 28          GetB();          
 29      });
 30                  
 31     }
 32     function GetB()
 33     {
 34         $("#ddl2").html(""); $("#ddl3").html("");
 35         var strId = $("#ddl1").attr("value");       
 36         if (strId != 0) {
 37             $.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
 38                 for (var i = 0; i < data.length; i++) {
 39                     $("select[name$=ddl2]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
 40                 };
 41                 GetC();              
 42             });                            
 43         }           
 44     }
 45     function GetC()
 46     {
 47         $("#ddl3").html("");
 48         var strId = $("#ddl2").attr("value");  
 49         if (strId != 0) {
 50             $.getJSON("LoadClass.ashx?ddlId=" + strId, function (data) {
 51                 for (var i = 0; i < data.length; i++) {
 52                     $("select[name$=ddl3]").append($("<option></option>").val(data[i].ID).html(data[i].Cname));
 53                 };                        
 54             });                 
 55         }        
 56     }
 57 </script>
 58 
 59  
 60 
 61 LoadClass.ashx:
 62 
 63 <%@ WebHandler Language="C#" Class="LoadClass" %>
 64 
 65 using System;
 66 using System.Web;
 67 
 68 using System.Text;
 69 using System.Data;
 70 
 71 public class LoadClass : IHttpHandler {
 72     
 73     public void ProcessRequest (HttpContext context) {
 74         // 数组   [{"ID":"275","Cname":"A1"},{"ID":"319","Cname":"A2"},{"ID":"322","Cname":"A3"}]
 75         int strId = Convert.ToInt32(context.Request["ddlId"]);               
 76         string strSQL = "select * from Class where parent_Ptr=" + strId + "  order by classOrder asc ";
 77         db d = new db();
 78         DataTable dt = d.getDT(strSQL);
 79         StringBuilder strClass = new StringBuilder();
 80         if (dt != null)
 81         {
 82             strClass.Append("[");
 83             for (int i = 0; i < dt.Rows.Count; i++)
 84             {
 85                 strClass.Append("{");
 86                 strClass.Append("\"ID\":\"" + dt.Rows[i]["id"].ToString() + "\",");
 87                 strClass.Append("\"Cname\":\"" + dt.Rows[i]["classCname"].ToString() + "\"");
 88 
 89                 if (i != dt.Rows.Count - 1)
 90                 {
 91                     strClass.Append("},");
 92                 }
 93             }
 94 
 95         }
 96         strClass.Append("}");
 97         strClass.Append("]");      
 98         context.Response.ContentType = "application/json";
 99         context.Response.ContentEncoding = Encoding.UTF8;
100         context.Response.Write(strClass.ToString());
101         context.Response.End();
102     }
103  
104     public bool IsReusable {
105         get {
106             return false;
107         }
108     }
109 
110 }

注意：

 
  
//后台只能获取value值，不能直接获取text，需要通过js、控件中转 
  
//结果：275 276 277 
  
Label1.Text = Request.Form[ddl1.UniqueID] + " " 
  
                   + Request.Form["ddl2"] + " " 
  
                   + Request.Form[ddl3.ClientID.Replace("_", "$")] ;
  
遇到的问题：
  
下拉框text的值通过HiddenField控件中转
  
 <asp:HiddenField ID="HiddenField1" runat="server" />
  
 <asp:HiddenField ID="HiddenField2" runat="server" />
  
 <asp:HiddenField ID="HiddenField3" runat="server" /> 
  
把选中下拉框的值赋予隐藏控件中： 
  
<script type="text/javascript">       
  
        var Key1 = $("#ddl1>option:selected").val();
  
        $('#HiddenField1').val(Key1);
  
        var Key2 = $("#ddl2>option:selected").val();
  
        $('#HiddenField2').val(Key2);
  
        var Key3 = $("#ddl3>option:selected").val();
  
        $('#HiddenField3').val(Key3);    
  
</script>
  

选择下拉框后 动态赋值到HiddenField 控件中的值 无法与下拉框选中的值相对应！

可能与初始化有关，赋值这段代码应该放到什么地方呢？或者有什么好的方法，欢迎讨论？

作者：曾祥展

出处：学无止境-博客园 （http://www.cnblogs.com/zengxiangzhan/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。