首頁 > 開發者 > ASP

N 個 ASP.net DropDownList 無重新整理聯動菜單

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
 再談 N 個 ASP.net DropDownList 無重新整理聯動菜單，犧牲N-1個ASPX來實現自動更新機制，避免重新整理的閃動！！

以下代碼絕對可以使用，也可以實現多級菜單。。。。


  <script language="javascript">
   function load(state)
   {
    var drp2 = document.getElementById("DropDownList2");
    for(var i=0;i<=drp2.options.length-1;i++)
    {
     drp2.remove(i);
    }
    var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");    //發送請求
    var oDoc = new ActiveXObject("MSXML2.DOMDocument");    //響應結果
    var state=document.getElementById("DropDownList1").value;
    oHttpReq.open("post","webform2.aspx?state="+state, false);
    oHttpReq.send("");
    result = oHttpReq.responseText;
    oDoc.loadXML(result);　
    
   // items = oDoc.selectNodes("//CITY/Table");
       items = oDoc.selectNodes("//address/Table");
　　   for (var item = items.nextNode();item;item = items.nextNode())
　　   {　
　　   　var city = item.selectSingleNode("//address").nodeTypedValue;
　　   　var newOption = document.createElement("OPTION");　
　　   　newOption.text = city;　
　　   　newOption.value = city;　
　　   　drp2.options.add(newOption);　
　　  　 }　
   }
  </script>

 

 

============================

webform1.aspx

private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此處放置使用者代碼以初始化頁面
   if(!IsPostBack)
   {
    SqlConnection con = new SqlConnection("packet size=4096;user id=sa;data source=SERVER;persist security info=False;initial catalog=pubs");
    SqlDataAdapter da = new SqlDataAdapter("select state from authors group by state",con);
    DataSet ds = new DataSet("State");
    da.Fill(ds);
    this.DropDownList1.DataSource = ds.Tables[0];
    this.DropDownList1.DataTextField = "state";
    this.DropDownList1.DataValueField = "state";　
    this.DropDownList1.DataBind();　　
    this.DropDownList1.Attributes.Add("onchange","load()");　　
    //DropDownList1.
   }
  
  }

 

webform2.aspx

 private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此處放置使用者代碼以初始化頁面
   if(this.Request["state"]!=null)
   {　　
    string state = this.Request["state"].ToString();　　
    SqlConnection con = new SqlConnection("packet size=4096;user id=sa;data source=SERVER;persist security info=False;initial catalog=pubs");
    SqlDataAdapter da = new SqlDataAdapter("select address from authors where state = '"+state+"'",con);　　
    DataSet ds = new DataSet("address");　　
    da.Fill(ds);　　
    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();　　
   }
  }

 

---------------------------------

仔細看看``其實完全不用在響應多個DROPLIST的時候犧牲 N-1 個頁面，因為所有的響應都有一個共性，為什麼不可以多傳一個值進行判斷響應那一個方法呢？？？

var type ="type1";

 oHttpReq.open("post","webform2.aspx?state="+state+"&type="+type, false);

  string type = this.Request["type"].ToString();

switch(type)

{

    case "type1":

      .........................................

}

 

----------------------------------------------

程式需要做幾處修改：

1、解決drp2、drp3清楚不完全的問題： drp2.innerText ="";  drp3.......................

2、

   for (var item = items.nextNode();item;item = items.nextNode())
　　   {　
　　   　var city = item.nodeTypedValue;
　　   　var newOption = document.createElement("OPTION");　
　　   　newOption.text = city;　
　　   　newOption.value = city;　
　　   　drp2.options.add(newOption);　
　　  　 }　
3、如果傳多個值的問題也是一樣``

select t1,t2 from tt

只要多加一個條件就可以解決問題

 

=======================================================

這個還有很多可以研究的問題``比如重新整理後值的問題。。。。。。。。。。。。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=548121

 

 

程式示範地址：http://www.718.com.cn/other/Example.aspx

在網上看到了一些無重新整理的聯動控制項。下下了測試以後，顯示英文和數字可以，但是不可以顯示中文，後來把從網上down下來的檔案做了一個翻修改，做了一個省市的聯動控制項。給大家共用一下。可以顯示中文了。

 

<%@ Page language="c#" Codebehind="Example.aspx.cs" AutoEventWireup="false" Inherits="Webs.other.Example" %>
<HTML>
<HEAD>
<title>Example</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script>
function load(state){
var drp2 = document.getElementById("DropDownList2");
for (i = drp2.length; i >= 0; i--){
drp2.options.remove(i);
}

var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
var oDoc = new ActiveXObject("MSXML2.DOMDocument");

oHttpReq.open("POST", "getData.aspx?state="+state, false);
oHttpReq.send("");
result = oHttpReq.responseText;
oDoc.loadXML(result);
items1 = oDoc.selectNodes("//CITY/Table/Id");
items2 = oDoc.selectNodes("//CITY/Table/shiname");

var itemsLength=items1.length;
　　for(i=0;i<itemsLength;i++)

//將小類的類名和編號賦予DropDownList2
　　{
　　var newOption = document.createElement("OPTION");
　　newOption.text=items2[i].text;
　　newOption.value=items1[i].text;
　　drp2.options.add(newOption);
　　}
}
window.onload = function(){load('1');}

</script>
</HEAD>
<body MS_POSITIONING="FlowLayout">
<form id="Form1" method="post" runat="server">
<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
<asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList>
<asp:TextBox id="TH" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Button"></asp:Button>
</form>
</body>
</HTML>

cs源檔案:

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

namespace Webs.other
{
 /// <summary>
 /// Example 的摘要說明。
 /// </summary>
 public class Example : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.DropDownList DropDownList1;
  protected System.Web.UI.WebControls.TextBox TH;
  protected System.Web.UI.WebControls.Button Button1;
  protected System.Web.UI.WebControls.DropDownList DropDownList2;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此處放置使用者代碼以初始化頁面
   if(!this.IsPostBack)
   {
    // 建立資料來源載入第一個DropDownList，也可以預設載入第二個
    SqlConnection con = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("connStr1"));
    SqlDataAdapter da = new SqlDataAdapter("select Id,shengname from Province",con);
    DataSet ds = new DataSet();
    da.Fill(ds);
    this.DropDownList1.DataSource = ds;
    this.DropDownList1.DataTextField = "shengname";
    this.DropDownList1.DataValueField = "Id";
    this.DropDownList1.DataBind();
    // 這裡是綁定用戶端事件，當第一個DropDownList的選項改變時激發下面的事件onchange，這個事件將調用一個用戶端方法load()
    this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].value)");
   }
  }

  #region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN：該調用是 ASP.NET Web Form設計器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 設計器支援所需的方法 - 不要使用代碼編輯器修改
  /// 此方法的內容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.Button1.Click += new System.EventHandler(this.Button1_Click);
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion

  private void Button1_Click(object sender, System.EventArgs e)
  {
   TH.Text=this.Request.Form["DropDownList2"].ToString();
  }
 }
}

 

getdata源檔案

 

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Xml;
using System.Configuration;
using System.Text;

namespace Webs.other
{
 /// <summary>
 /// GetData 的摘要說明。
 /// </summary>
 public class GetData : System.Web.UI.Page
 {
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此處放置使用者代碼以初始化頁面
   //Response.Write(Request["state"]);
   int shengNo=int.Parse(Request["state"].ToString());   
   SqlConnection con = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("connStr1"));
   SqlDataAdapter da = new SqlDataAdapter("select Id,shiname from City where Shengid='"+shengNo+"'",con);
   DataSet ds = new DataSet("CITY");
   da.Fill(ds);

   XmlTextWriter writer = new XmlTextWriter(Response.OutputStream,Encoding.UTF8);
   writer.Formatting = Formatting.Indented;
   writer.Indentation = 4;
   writer.IndentChar = ' ';
   writer.WriteStartDocument();
   ds.WriteXml(writer);
   writer.Flush();
   Response.End();
   writer.Close();   
  }

  #region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN：該調用是 ASP.NET Web Form設計器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 設計器支援所需的方法 - 不要使用代碼編輯器修改
  /// 此方法的內容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.Load += new System.EventHandler(this.Page_Load);
  }
  #endregion
 }
}

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=472917

 

 ASP.net DropDownList 無重新整理聯動！ <TITLE>WebForm2</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("//Market/Table/maName");
    var idItems = oDoc.selectNodes("//Market/Table/maId");
    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("//Market/Table/maName");
    var idItems = oDoc.selectNodes("//Market/Table/maId");
    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 ms_positioning="GridLayout" 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>
  </FORM>
 </BODY>
</HTML>
-----------------------
namespace dropDown
{
 /// <summary>
 /// WebForm2 的摘要說明。
 /// </summary>
 public class WebForm2 : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.DropDownList DropDownList1;
  protected System.Web.UI.WebControls.DropDownList Dropdownlist3;
  protected System.Web.UI.WebControls.DropDownList DropDownList2;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此處放置使用者代碼以初始化頁面
   if(!this.IsPostBack)
   {
    SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd=");
    SqlDataAdapter da = new SqlDataAdapter("select maId,maName from tabMarket  where maCls=0",con);
    DataSet ds = new DataSet();
    da.Fill(ds,"op");
    this.DropDownList1.DataSource=ds.Tables[0];
    this.DropDownList1.DataTextField = "maName";
    this.DropDownList1.DataValueField = "maId";
    this.DropDownList1.DataBind();
    this.DropDownList1.Attributes.Add("onchange","load()");
    this.DropDownList2.Attributes.Add("onchange","load2()");
   }

  }

 }
}
-----------------------
public class WebForm1 : System.Web.UI.Page
 {
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此處放置使用者代碼以初始化頁面
   // Put user code to initialize the page here
   //if(this.Request["state"]!=null)
   //{ 
     string id =this.Request["id"];
    SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd=;");
    SqlDataAdapter da = new SqlDataAdapter("select maName,maId  from tabMarket where maParent=@id and maSt=1 ",con);
       da.SelectCommand.Parameters.Add("@id",id);
    DataSet ds = new DataSet("Market");
    da.Fill(ds);
   
       ds.WriteXml(Response.OutputStream);
       Response.Flush ();
       Response.End ();
      
   //}
  }
       }
-----------------------------
 public class WebForm3 : System.Web.UI.Page
 {
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此處放置使用者代碼以初始化頁面
   string id =Request["id"];
   SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd=;");
   SqlDataAdapter da = new SqlDataAdapter("select maName,maId  from tabMarket where maParent=@id and maSt=1",con);
   da.SelectCommand.Parameters.Add("@id",id);
   DataSet ds = new DataSet("Market");
   da.Fill(ds);
   
   ds.WriteXml(Response.OutputStream);
   Response.Flush ();
   Response.End ();
  }
       }
------------------

 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1377536

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
mvc dropdownlist from database kendo mvc dropdownlist get selected value constant n exp n id n mssql n json n
相關文章
ASP學習總結：錯誤碼
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More