net + js 实现无刷新联动下拉框

C#代码

using  System;    
using  System.Data;    
using  System.Configuration;    
using  System.Web;    
using  System.Web.Security;    
using  System.Web.UI;    
using  System.Web.UI.WebControls;    
using  System.Web.UI.WebControls.WebParts;    
using  System.Web.UI.HtmlControls;    
using  System.Data.OleDb;    
   
public   partial   class  _Default : System.Web.UI.Page     
{    
     protected   void  Page_Load( object  sender, EventArgs e)    
    {    
         if  ( ! IsPostBack)    
        {    
            Bind();    
        }    
    }    
     void  Bind()    
    {    
         string  sql  =   " select * from category " ;    
        DataTable dt  =  getTable(sql);    
         this .select1.Items.Clear();    
        ListItem item  =   new  ListItem( " --请选择-- " ,  " -1 " );    
         this .select1.Items.Add(item);    
         for  ( int  i  =   0 ; i  <  dt.Rows.Count; i ++ )    
        {    
            ListItem itemNew  =   new  ListItem(dt.Rows[i][ " name " ].ToString(),dt.Rows[i][ " id " ].ToString());    
             this .select1.Items.Add(itemNew);    
   
             // 种类--做双向连动就可以用到了这个例子暂时没用..    
             string  script  =   " InitCategory(' "   +  dt.Rows[i][ " id " ].ToString()  +   " ',' "   +  dt.Rows[i][ " name " ].ToString()  +   " '); " ;    
            Page.ClientScript.RegisterStartupScript(Page.GetType(), Guid.NewGuid().ToString(), script, true );    
        }    
   
         string  sqlP  =   " select * from product " ;    
        DataTable dtp  =  getTable(sqlP);    
         this .select2.Items.Clear();    
        ListItem item2  =   new  ListItem( " --请选择-- " , " -1 " );    
         this .select2.Items.Add(item2);    
         for  ( int  i  =   0 ; i  <  dtp.Rows.Count; i ++ )    
        {    
            DataRow row  =  dtp.Rows[i];    
            ListItem it  =   new  ListItem(row[ " pname " ].ToString(),row[ " pid " ].ToString());    
             this .select2.Items.Add(it);    
             string  s  =   " InitProduct(' "   +  row[ " pid " ].ToString()  +   " ',' " + row[ " cid " ].ToString() + " ',' "   +  row[ " pname " ].ToString()  +   " '); " ;    
            Page.ClientScript.RegisterStartupScript(Page.GetType(), Guid.NewGuid().ToString(), s,  true );    
        }    
    }    
   
    DataTable getTable( string  sql)    
    {    
        OleDbCommand cmd  =   new  OleDbCommand(sql, getCon());    
        OleDbDataAdapter da  =   new  OleDbDataAdapter(cmd);    
        DataSet ds  =   new  DataSet();    
        da.Fill(ds);    
         return  ds.Tables[ 0 ];    
            
    }    
    OleDbConnection getCon()    
    {    
         return   new  OleDbConnection( " Provider=Microsoft.Jet.OLEDB.4.0;Persist Security Info=False;Data Source= "   +  HttpContext.Current.Server.MapPath( " App_Data/db2.mdb; " ));    
    }    
}

 

XML/HTML代码

<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>    
   
<! 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" >    
         function  $(id)    
        {    
             return  document.getElementById(id);    
        }    
         // 种类--做双向连动就可以用到了这个例子暂时没用..    
         function  CategoryEnty()    
        {    
            id = null ;    
            pid = null ;    
            name = null ;    
        }    
         var  cateArray  =   new  Array();    
         function  InitCategory(id,name)    
        {    
             var  ce  = new   CategoryEnty();    
            ce.id = id;    
            ce.pid = pid;    
            ce.name = name;    
            cateArray.push(ce);    
        }    
         // 下拉框改变    
         function  ChangeSelect()    
        {    
             var  sValue  =  $( " select1 " ).value;    
             var  count = 0 ;    
            $( " select2 " ).options.innerHTML = "" ;    
            $( " select2 " ).options[ 0 ] =   new  Option( " --请选择-- " , " -1 " );    
             for ( var  i = 0 ;i < pArray.length;i ++ )    
            {    
                 if (sValue == pArray[i].cid)    
                {       
                     count ++ ;    
                     $( " select2 " ).options[count] =   new  Option(pArray[i].name,pArray[i].id);    
                         
                }    
            }    
        }    
            
         // 产品    
         function  ProductEnty()    
        {    
            id = null ;    
            cid = null ;    
            name = null ;    
        }    
         var  pArray  =   new  Array();    
         function  InitProduct(id,cid,name)    
        {    
             var  pe  =   new  ProductEnty();    
            pe.id = id;    
            pe.cid = cid;    
            pe.name = name;    
            pArray.push(pe);    
        }    
     </ script >    
</ head >    
   
< body >    
     < form  id ="form1"  runat ="server" >    
     < div >    
        < select  id ="select1"  runat =server  onchange ="ChangeSelect();" >< option  value ="-1" > --请选择-- </ option ></ select >    
        < select  id ="select2"  runat =server >< option  value ="-1" > --请选择-- </ option ></ select >    
     </ div >    
     </ form >    
</ body >    
</ html >