怎样实现无刷新的，动态生成的联动下了框

有很多种做法了.
你现在二级的都不是很难的.用AJAX的一个UPDATEPANEL都可以了.邦定数据库.下面个是三级的简单例子.自己看着修改.
说明:
     WebForm2窗体:是需要下拉联动的界面,放三个下拉.
     WebForm1窗体:是WebForm2窗体第一个下拉框DropDownList1改变邦定DropDownList2的代码.
     WebForm3窗体:是WebForm1窗体第二个下拉框DropDownList2改变邦定DropDownList3的代码.数据库脚本:
     /*省表脚本*/
     CREATE TABLE [pShen] (
[sId] [int] IDENTITY (1, 1) NOT NULL ,
[sName] [varchar] (10) COLLATE Chinese_PRC_CI_AS NULL
     ) ON [PRIMARY]
     GO     /*市表脚本*/
     CREATE TABLE [pshi] (
[sId] [int] IDENTITY (1, 1) NOT NULL ,
[shenId] [int] NULL ,
[sName] [varchar] (10) COLLATE Chinese_PRC_CI_AS NULL
     ) ON [PRIMARY]
     GO
     /*区表脚本*/
     CREATE TABLE [pQu] (
[qId] [int] IDENTITY (1, 1) NOT NULL ,
[shiId] [int] NULL ,
[qName] [varchar] (10) COLLATE Chinese_PRC_CI_AS NULL
     ) ON [PRIMARY]
     GO主界面WebForm2源代码:
<head runat="server">
    <title>无标题页</title>
<SCRIPT language='javascript'>
  function load()
  {
     var drp2 = document.getElementById("DropDownList2");
     drp2.innerText="";
     for(var i = 0;i<=drp2.options.length -1;i++)
     {
        drp2.remove(i);
     }
     var drp3 = document.getElementById("DropDownList3");
     for(var i = 0;i<=drp3.options.length -1;i++)
     {
        drp3.remove(i);
     }
     var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
     var oDoc = new ActiveXObject("MSXML2.DOMDocument");
     var state=document.getElementById("DropDownList1").value;
     xmlhttp.open("POST", "webform1.aspx?id="+state,false);
     xmlhttp.send("");
     var res=oDoc.loadXML(xmlhttp.responseText);
     var naItems = oDoc.selectNodes("//pShi/Table/sName");
     var idItems = oDoc.selectNodes("//pShi/Table/sId");
     var item;
     var id;
     for (item = naItems.nextNode(),id=idItems.nextNode(); item&&id; item = naItems.nextNode(),id=idItems.nextNode()){
     var nastr = item.nodeTypedValue;
     var idstr = id.nodeTypedValue;
     var newOption = document.createElement("OPTION");
     newOption.text =nastr;
     newOption.value = idstr;

     drp2.options.add(newOption);
    }
    load2();
  }

  function load2()
  {
     var drp2 = document.getElementById("DropDownList3");
     drp2.innerText="";
     for(var i = 0;i<=drp2.options.length -1;i++)
     {
        drp2.remove(i);
     }
     var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
     var oDoc = new ActiveXObject("MSXML2.DOMDocument");
     var state=document.getElementById("DropDownList2").value;
     xmlhttp.open("POST", "webform3.aspx?id="+state,false);
     xmlhttp.send("");
     var res=oDoc.loadXML(xmlhttp.responseText);
     var naItems = oDoc.selectNodes("//pQu/Table/qName");
     var idItems = oDoc.selectNodes("//pQu/Table/qId");
     var item;
     var id;
     for (item = naItems.nextNode(),id=idItems.nextNode(); item&&id; item = naItems.nextNode(),id=idItems.nextNode())
     {
         var nastr = item.nodeTypedValue;
         var idstr = id.nodeTypedValue;
         var newOption = document.createElement("OPTION");
         newOption.text =nastr;
         newOption.value = idstr;
         drp2.options.add(newOption);
     }
  }
  </SCRIPT>
</HEAD>
<BODY onload="load()">
  <FORM id="Form1" method="post" runat="server">
   <ASP:DROPDOWNLIST id="DropDownList1" runat="server"></ASP:DROPDOWNLIST>
   <ASP:DROPDOWNLIST id="DropDownList2" runat="server"></ASP:DROPDOWNLIST>
   <ASP:DROPDOWNLIST id="Dropdownlist3" runat="server"></ASP:DROPDOWNLIST>
      <br />
      <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="OneValue" />
      <asp:Button ID="Button2" runat="server" Text="OneValue" OnClick="Button2_Click" />
      <asp:Button ID="Button3" runat="server" Text="ThreeValue" OnClick="Button3_Click" />
  </FORM>
</BODY>
</HTML>主界面WebForm2的Page_Load代码:
protected void Page_Load(object sender, EventArgs e)
{
        if (!this.IsPostBack)
        {

            SqlConnection con = new SqlConnection("server=localhost;database=master;uid=sa;pwd=123456");
            SqlDataAdapter da = new SqlDataAdapter("select sId,sName from pShen", con);
            DataSet ds = new DataSet();
            da.Fill(ds, "pShen");
            this.DropDownList1.DataSource = ds.Tables[0];
            this.DropDownList1.DataTextField = "sName";
            this.DropDownList1.DataValueField = "sId";
            this.DropDownList1.DataBind();
            this.DropDownList1.Attributes.Add("onchange", "load()");
            this.DropDownList2.Attributes.Add("onchange", "load2()");
}
}主界面WebForm1的Page_Load代码:
protected void Page_Load(object sender, EventArgs e)
{
        // 在此处放置用户代码以初始化页面
        // Put user code to initialize the page here
        string id =this.Request["id"];
        SqlConnection con = new SqlConnection("server=localhost;database=master;uid=sa;pwd=123456");
        SqlDataAdapter da = new SqlDataAdapter("select sName,sId from pShi where shenid=@id",con);
        da.SelectCommand.Parameters.Add("@id",id);
        DataSet ds = new DataSet("pShi");
        da.Fill(ds);

        ds.WriteXml(Response.OutputStream);
        Response.Flush ();
        Response.End ();
}主界面WebForm3的Page_Load代码:
protected void Page_Load(object sender, EventArgs e)
{
        // 在此处放置用户代码以初始化页面
        string id = Request["id"];
        SqlConnection con = new SqlConnection("server=localhost;database=master;uid=sa;pwd=123456");
        SqlDataAdapter da = new SqlDataAdapter("select qName,qId  from pQu where shiid=@id", con);
        da.SelectCommand.Parameters.Add("@id", id);
        DataSet ds = new DataSet("pQu");
        da.Fill(ds);        ds.WriteXml(Response.OutputStream);
        Response.Flush();
        Response.End();
}注意:
     因为三级联动使用了AJAX技术,所以在WebForm2源码头设属性EnableEventValidation="false",就不会出现目录安全错误!
     要获取下拉框的值,使用Request.Form["DropDownList1"]即可!

使用javascript
2楼已经给例子了

http://blog.csdn.net/wangjun8868/archive/2008/09/26/2983149.aspx

icallbackeventhandler
ajax
都可以实现的，你要有个表存储这些信息

if (!Page.IsPostBack)
        {
            ddlassertaddress.DataSource = xb.SelectMachineAll();
            ddlassertaddress.DataTextField = "machName";
            ddlassertaddress.DataValueField = "machineId";
            ddlassertaddress.DataBind();
            ddlassertaddress.Items.Insert(0,"---请选择---");
        }
/// <summary>
    /// 获得选择机构的编号后激发事件
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void ddlassertaddress_SelectedIndexChanged(object sender, EventArgs e)
    {
        Machine mh = new Machine();
        int machid = Convert.ToInt32(ddlassertaddress.SelectedValue.ToString());
        mh.MachineId = machid;
        ddlassertadr.DataSource = xb.SelectByAddress(mh);
        ddlassertadr.DataTextField = "adrName";
        ddlassertadr.DataValueField = "adrId";
        ddlassertadr.DataBind();
        ddlassertadr.Items.Insert(0,"---请选择---");
    }
绑定数据库下拉列表选定值的时候激发个事件就行了

var drp2 = document.getElementById("DropDownList2");
     drp2.innerText="";
     for(var i = 0;i<=drp2.options.length -1;i++)
     {
        drp2.remove(i);
     } drp2 引用的是一个对象  那如果它用了的是一个TestBox 那它有没有remove方法比如  又有什么方法
我要怎么样才可以学到这种知识
var naItems = oDoc.selectNodes("//pQu/Table/qName");
var idItems = oDoc.selectNodes("//pQu/Table/qId"); oDoc.selectNodes（""）查XML文档的‘SQL’语句？for (item = naItems.nextNode(),id=idItems.nextNode(); item&&id; item = naItems.nextNode(),id=idItems.nextNode()){
     var nastr = item.nodeTypedValue;
     var idstr = id.nodeTypedValue;
     var newOption = document.createElement("OPTION");
     newOption.text =nastr;
     newOption.value = idstr;

     drp2.options.add(newOption);
    }
这条For语句解释一下  解释for（这部分就可以了）
string id =this.Request["id"];
SqlConnection con = new SqlConnection("server=localhost;database=master;uid=sa;pwd=123456");
SqlDataAdapter da = new SqlDataAdapter("select sName,sId from pShi where shenid=@id",con);
da.SelectCommand.Parameters.Add("@id",id);解释这一句！谢谢会加分的 ^_^

调试易

怎样实现无刷新的，动态生成的联动下了框

解决方案 »