用DropDownLis实现无刷新联动菜单

<form id="Form1" method="post" runat="server">
<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
<asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList>
<SCRIPT LANGUAGE="JavaScript">
<!--
//以XML求取数据
function XmlPost(obj)
{
  var svalue = obj.value;
  var webFileUrl = "?brc_id=" + svalue;
  var result = "";
  var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
  xmlHttp.open("POST", webFileUrl, false);
  xmlHttp.send("");
  result = xmlHttp.responseText;
  
  if(result != "")
  {
    document.all("DropDownList2").length=0;
    var piArray = result.split(",");
    for(var i=0;i<piArray.length;i++)
    {
      var ary1 = piArray[i].toString().split("|");
      //alert(ary1[0].toString());
      document.all("DropDownList2").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
    }
  }
  else
  {
    alert(result);
  }
}
//-->
</SCRIPT>    
</form>

以下为后台代码:

private System.Data.OleDb.OleDbConnection conn;

private DataTable get_dt(string sql)
{
  string connstr = "Provider=MSDAORA.1;Password=aqjc;User ID=aqjc;Data Source=aqjc";
  this.conn = new OleDbConnection(connstr);
  this.conn.Open();
  OleDbCommand myOleDbCommand = new OleDbCommand(sql,this.conn);
  OleDbDataAdapter myData = new OleDbDataAdapter(myOleDbCommand);

  DataSet myDataset = new DataSet();
  try
  {
    myData.Fill(myDataset);
  }
  catch(Exception ex)
  {
    throw ex;
  }

  this.conn.Close();
  return myDataset.Tables[0];  
}

private void Page_Load(object sender, System.EventArgs e)
{
  string brc_id = this.Request.QueryString["brc_id"];
  if(brc_id + "a" != "a")
  {
    this.down2_bind(brc_id);
  }

  if(!this.IsPostBack)
  {
    this.down1_bind();
  }
}

/// <summary>
/// 返回第2个下拉框需要的值给xmlhttp
/// </summary>
/// <param name="brc_id"></param>
private void down2_bind(string brc_id)
{
  string mystr = "";
  string sql = "select brc_id,brc_name from asm_branch where brc_parentid = '" + brc_id + "'";
  DataTable mytab = this.get_dt(sql);

  if(mytab.Rows.Count != 0)
  {
    for(int i=0;i<mytab.Rows.Count;i++)
    {
      mystr += "," + mytab.Rows[i][0].ToString() + "|" + mytab.Rows[i][1].ToString();
    }
    mystr = mystr.Substring(1);
  }
  this.Response.Write(mystr);
  this.Response.End();
}

/// <summary>
/// 绑定第一个下拉框
/// </summary>
private void down1_bind()
{
  string sql = "select brc_id,brc_name from asm_branch where brc_level = '1'";
  DataTable mytab = this.get_dt(sql);
  this.DropDownList1.DataSource = mytab;
  this.DropDownList1.DataValueField = "brc_id";
  this.DropDownList1.DataTextField = "brc_name";
  this.DropDownList1.DataBind();
  this.DropDownList1.Attributes.Add("onchange","XmlPost(this);");
}


//以下是VB脚本
<SCRIPT LANGUAGE="vbScript">
<!--
'以XML求取数据
function XmlPost(obj)
  dim svalue
  svalue = obj.value
  dim webFileUrl
  webFileUrl = "?brc_id=" + svalue
  dim result
  set xmlHttp = CreateObject("Microsoft.XMLHTTP")
  call xmlHttp.open("POST", webFileUrl, false)
  call xmlHttp.send("")
  result = xmlHttp.responseText

  set downlist = document.all("DropDownList2")

  if result <> "" then
    document.all("DropDownList2").length=0
    dim piArray ,ary1
    piArray = split(result,",")
    for i=0 to piArray.length - 1
      ary1 = split(piArray(i),"|")
      downlist.length = downlist.length + 1
      downlist.options(downlist.length-1).text = ary1(1)
      downlist.options(downlist.length-1).value = ary1(0)
    next
  else
    alert(result)
  end if
end function
//-->
</SCRIPT>  
http://www.cnblogs.com/gwazy/archive/2005/05/10/152312.html

function Do_Link_Change(ChangeObj,n,jsVal,jsShow)
 {
     if (n<0) return ;
     var e = eval("document.all."+ChangeObj);
     for (var i=e.options.length; i>-1; i--) 
               e.remove(i);
     var show = eval(jsShow+"["+ n+"]"); //得到数组名
     var val=eval(jsVal+"["+ n+"]");
     if (val.length<1) return;
       for (var i=0; i<val.length; i++)
            e.options.add(new Option(show[i], val[i])); 
}
然后你必须在客户端写对应的js变量,例如
 var area_show = new Array();
         var area_value = new Array();
         var point_show = new Array();
         var point_value = new Array();
area_show[0]='广东';
  area_value[0]=510000;
  point_show[0]=new Array();
  point_value[0]=new Array();
  area_show[1]='广州';
  area_value[1]=510100;
  point_show[1]=new Array();
  point_value[1]=new Array();
  point_show[1][0]='天河';
  point_value[1][0]=1;
  point_show[1][1]='河南';
  point_value[1][1]=1;
  point_show[1][2]='火车站';
  point_value[1][2]=3;
  area_show[2]='深圳';
  area_value[2]=510200;
  point_show[2]=new Array();
  point_value[2]=new Array();
  point_show[2][0]='南山';
  point_value[2][0]=1;
  point_show[2][1]='龙岗';
  point_value[2][1]=1;
  point_show[2][2]='盐田';
  point_value[2][2]=3;

然后再第一个dropdownlist里面写 onchange="Do_Link_Change('npoint',this.selectedIndex,'point_value','point_show')" 
"npoint"是第二个dropdownlist的id


另加:http://community.csdn.net/Expert/topic/4097/4097823.xml?temp=.9292414

你可能感兴趣的:(drop)