DropDownList 无刷新解决

数据库内容如上图;
Default.aspx页前台代码:

<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    function load(state)
    {
    var dp2=document.getElementById("DropDownList2");
      while(dp2.options.length>0)
      {
       dp2.options.remove(0);
       }
       var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
       var oDoc = new ActiveXObject("MSXML2.DOMDocument");
       oHttpReq.open("POST", "Default2.aspx?state="+state, false);
       oHttpReq.send("");
       result = oHttpReq.responseText;
       oDoc.loadXML(result);
      items = oDoc.selectNodes("//NewDataSet/china");   //NewDataSet代表数据集名,china代表数据集中的表名
       for (var item = items.nextNode(); item; item = items.nextNode())
       {
           var city = item.selectSingleNode("cityname").nodeTypedValue; //cityname数据库表字段名
           var cid=item.selectSingleNode("id").nodeTypedValue; //id数据库ID
           var newOption = document.createElement("OPTION");
            newOption.text = city;                         //下拉框的文本,如北京
            newOption.value = cid;                        //下拉框的值,如11
            dp2.options.add(newOption);
       }

    }

    </script>
</head>
<body>
    <form id="form1" runat="server">

        <div>
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
            <asp:DropDownList ID="DropDownList2" runat="server">
            </asp:DropDownList>
            <asp:Label ID="Label1" runat="server"></asp:Label><br />

            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="添加" /></div>
    </form>
</body>
</html>

Default.aspx后台代码:

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.SqlClient;
public partial class _Default : System.Web.UI.Page
{
    SqlConnection conn;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Binddata();
        }
    }
    protected void Binddata()
    {
        conn = SqlHelper.conn();
        string sql = "select * from china where parentid=0";
        SqlCommand cmd = new SqlCommand(sql,conn);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        conn.Open();
        da.Fill(ds, "table");
        conn.Close();
        this.DropDownList1.DataSource = ds;
        this.DropDownList1.DataTextField = "cityname";
        this.DropDownList1.DataValueField = "id";
        this.DropDownList1.DataBind();
        this.DropDownList1.Attributes.Add("onchange", "load(this.options[this.selectedIndex].value)");//如果传中文建议用value,要传Dropdownlist取的文本innerText；

    }
    protected void Button1_Click(object sender, EventArgs e)
    {

//测试第二个DropDownList的值
this.Label1.Text = this.Request.Form["DropDownList2"].ToString();
}
}

Default2.aspx的前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Default2.aspx的后台CS代码:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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.SqlClient;
using System.Xml;
public partial class Default2 : System.Web.UI.Page
{
    SqlConnection conn;

    protected void Page_Load(object sender, EventArgs e)
    {
        Binddata();

    }
    protected void Binddata()
    {
        if (this.Request["state"] != null)
        {
            string state = this.Request["state"].ToString();

            conn = SqlHelper.conn();
            SqlDataAdapter da = new SqlDataAdapter("select * from china where parentid = '" + state + "'", conn);
            DataSet ds = new DataSet();   //此处CITY表示数据集名,与上面取数据时一致
            da.Fill(ds,"china");
            XmlTextWriter writer = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
            writer.Formatting = Formatting.Indented;
            writer.Indentation = 4;
            writer.IndentChar = ' ';
            ds.WriteXml(writer);
            writer.Flush();
            Response.End();
            writer.Close();

        }
        else
        {
            Response.Write("<script>alert('错误了哦')</script>");

}

}

}

SQLHELPER返回数据库连接:
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.SqlClient;
/// <summary>
/// SqlHelper 的摘要说明
/// </summary>
public class SqlHelper
{
public SqlHelper()
{
  //
  // TODO: 在此处添加构造函数逻辑
  //
}
    public static SqlConnection conn()
    {
    string conn=System.Configuration.ConfigurationManager.AppSettings["conn"];
    SqlConnection myconn = new SqlConnection(conn);
    return myconn;


    }
}

WEBCONFIG

<?xml version="1.0"?>

<configuration>
<appSettings>

  

  <add key="conn" value="Server=.;DataBase=droptest;uid=sa;password=123;"/>

</appSettings>
<connectionStrings/>
<system.web>
  
  <compilation debug="true">
   <assemblies>
    <add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/></assemblies></compilation>
  

  <!--
            如果在执行请求的过程中出现未处理的错误，
            则通过 <customErrors> 节可以配置相应的处理步骤。具体说来，
            开发人员通过该节可以配置
            要显示的 html 错误页
            以代替错误堆栈跟踪。

效果如下:

原文地址：https://www.cnblogs.com/zjba2/p/1085032.html