DropDownList无刷新级联下拉(固定级联),Jquery获取JOSN数据

1.HTML页面

 

< td  align ="left" >
                                
< asp:DropDownList  ID ="ddlOne"  runat ="server" >
                                
</ asp:DropDownList >
                                
< asp:DropDownList  ID ="ddlTwo"  runat ="server" >
                                
</ asp:DropDownList >
</ td >

ddlOne的绑定这里就不说了,后台直接绑定即可,关键是选择ddlOne的时候页面无刷新的级联ddlTwo。

首先添加ddlOne的选择事件

 

  this .ddlOne.Attributes.Add( " OnChange " " BindDropDownList() " );

2.BindeDropDownList()方法读取ashx,以获取父类ID等于ddlOne选中值的集合,这里我们用JOSN方式获取

 

JS
function  BindDropDownList() {
    
var  one  =  $( " #ddlOne " ).val();
    $(
" #ddlTwo " ).html( "" );
    $.getJSON(
" ../Customer/Area.ashx?parentid= "   +  one,  null function (json) {
        $.each(json, 
function (i) { $( " #ddlTwo " ).append($( " <option></option> " ).val(json[i].areacode).html(json[i].areaname)) });
    });
    $(
" <option></option> " ).val( " -1 " ).html( " ---请选择城市--- " ).appendTo( " #ddlTwo " );
}

 

2.area.ashx

ashx
public   void  ProcessRequest(HttpContext context)
        {
            StringBuilder sb 
=   new  StringBuilder();
            
string  strparent  =  context.Request.QueryString[ " parentid " ].ToString();
            
string  strwhere  =   "  areacode like ' "   +  strparent.Substring( 0 2 +   " %' and areacode not like '%0000' " ; // 取得子类
            DataTable dt  =   new  BLL.SF_Host_AreaInfo().GetList(strwhere).Tables[ 0 ];
            
if  (dt  ==   null   ||  dt.Rows.Count  ==   0 )
            {
                
return ;
            }
            
else
            {
                sb.Append(
" [ " );
                
for  ( int  i  =   0 ; i  <  dt.Rows.Count; i ++ )
                {
                    
// 返回JOSN数据
                    sb.Append( " {\"areacode\":\" "   +  dt.Rows[i][ " areacode " ].ToString()  +   " \",\"areaname\":\" "   +  dt.Rows[i][ " areaname " ].ToString()  +   " \"}, " );
                }
                sb.Remove(sb.Length 
-   1 1 );
                sb.Append(
" ] " );
            }
            context.Response.ContentType 
=   " application/json " ;
            context.Response.ContentEncoding 
=  Encoding.UTF8;
            context.Response.Write(sb.ToString());
        }

 

 

你可能感兴趣的:(jquery)