程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> ASP.NET基礎 >> 適用與firefox ASP.NET無刷新二級聯動下拉列表

適用與firefox ASP.NET無刷新二級聯動下拉列表

編輯:ASP.NET基礎
可能"極好的"又會帶來很多的非議,但是我認為這確實很好,我看了大約20個無刷新的連動下拉列表,他們在firefox下面就一團糟.為了這個我差不多搞了兩天,就是如果提交窗體後如何保持第二個列表框的值,因為通過js 給下拉框添加條目那麼他的狀態是不會被保存的測試平台:ie6,firefox 

功能:二級無刷新連動 

特點:跨浏覽器;提交窗體取第二下拉框的值;數據來源於數據庫;以xmlhttp來發送請求,實現無刷新 

請求:如果您能夠找到更好的方法請告訴我,非常感謝,您的批評和建議對我是莫大的鼓勵 

webform1.aspx: 


<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="drop.WebForm1" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<HTML> 
<HEAD> 
<title>WebForm1</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 language="javascript"> 
//jb函數會根據不同的浏覽器初始化個xmlhttp對象 
function jb() 

var A=null; 
try 

A=new ActiveXObject("Msxml2.XMLHTTP"); 

catch(e) 

try 

A=new ActiveXObject("Microsoft.XMLHTTP"); 

catch(oc) 

A=null 


if ( !A && typeof XMLHttpRequest != "undefined" ) 

A=new XMLHttpRequest() 

return A 


//下面Go函數是父列表框改變的時候調用,參數是選擇的條目 
function Go(obj) 

//得到選擇框的下拉列表的value 
var svalue = obj.value; 
//定義要處理數據的頁面 
var weburl = "webform1.aspx?parent_id="+svalue; 
//初始化個xmlhttp對象 
var xmlhttp = jb(); 
//提交數據,第一個參數最好為get,第三個參數最好為true 
xmlhttp.open("get",weburl,true); 
// alert(xmlhttp.responseText); 
//如果已經成功的返回了數據 
xmlhttp.onreadystatechange=function() 

if(xmlhttp.readyState==4)//4代表成功返回數據 

var result = xmlhttp.responseText;//得到服務器返回的數據 
//先清空dListChild的所有下拉項 
document.getElementById("dListChild").length = 0; 
//給dListChild加個全部型號的,注意是Option不是option 
document.getElementById("dListChild").options.add(new Option("全部型號","0")); 
if(result!="")//如果返回的數據不是空 

//把收到的字符串按照,分割成數組 
var allArray = result.split(","); 
//循環這個數組,注意是從1開始,因為收到的字符串第一個字符是,號,所以分割後第一個數組為空 
for(var i=1;i<allArray.length;i++) 

//在把這個字符串按照|分割成數組 
var thisArray = allArray[i].split("|"); 
//為dListChild添加條目 
document.getElementById("dListChild").options.add(new Option(thisArray[1].toString(),thisArray[0].toString())); 




//發送數據,請注意順序和參數,參數一定為null或者"" 
xmlhttp.send(null); 

</script> 
</HEAD> 
<body MS_POSITIONING="GridLayout"> 
<form id="Form1" method="post" runat="server"> 
<asp:DropDownList onchange="Go(this)" id="dListParent" style="Z-INDEX: 101; LEFT: 248px; POSITION: absolute; TOP: 40px" 
runat="server"> 
<asp:ListItem Value="100">摩托羅拉</asp:ListItem> 
<asp:ListItem Value="101">諾基亞</asp:ListItem> 
</asp:DropDownList> 
<asp:DropDownList id="dListChild" style="Z-INDEX: 102; LEFT: 248px; POSITION: absolute; TOP: 104px" 
runat="server"></asp:DropDownList> 
<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 256px; POSITION: absolute; TOP: 176px" runat="server" 
Text="Button"></asp:Button> 
</form> 
</body> 
</HTML> 

後台webform1.aspx.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.Configuration; 
using System.Data.SqlClient; 

namespace drop 

/// <summary> 
/// WebForm1 的摘要說明。 
/// </summary> 
public class WebForm1 : System.Web.UI.Page 

protected System.Web.UI.WebControls.DropDownList dListParent; 
protected System.Web.UI.WebControls.Button Button1; 
protected System.Web.UI.WebControls.DropDownList dListChild; 

private void Page_Load(object sender, System.EventArgs e) 

// 在此處放置用戶代碼以初始化頁面 
//if(!IsPostBack) 
//{ 
BindDrop();//如果不是提交回來就綁定列表框 
//} 


protected void BindDrop() 

//首先我想父dropdownlist也綁定數據庫,後面想沒必要 
//if(!IsPostBack) 
//{ 
//綁定父dListParent 
// BindParent(); 
//} 
//獲得傳遞過來的parent_id值,如果是第一次請求他為null 
string str = Request.QueryString["parent_id"]; 
string str1 = dListParent.SelectedValue;; 
Response.Write(str1); 
//如果str加個字符串!=原來的字符串則說明觸發過dListParent的onchange事件 
if((str+"abc")!="abc") 

//綁定 dListChild控件 
BindChild(str);//把傳來的父DropDownList的value做為參數 

else 
BindParent(str1); 



protected void BindParent(string str) 

//如果是第一次請求或者是刷新這個頁面則根據dListParent的值來選擇 
//把參數轉化成int 
int i = Convert.ToInt32(str); 
dListChild.Items.Clear(); 
dListChild.Items.Add(new ListItem("全部型號","0")); 
//得到數據庫連接字符串 
string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString(); 
//初始化個conn對象 
SqlConnection conn = new SqlConnection(connStr); 
//數據庫語句 
string commStr = string.Format("select type_value,type_text from phone_type where parent_id={0}",i); 
//建立數據庫命令對象 
SqlCommand comm = new SqlCommand(commStr,conn); 
//打開數據庫 
conn.Open(); 
//執行命令 
SqlDataReader dr = comm.ExecuteReader(); 
//循環dr,給dListParent添加條目 
while(dr.Read()) 

dListChild.Items.Add(new ListItem(dr[1].ToString(),dr[0].ToString())); 
//也可以這樣 
//dListParent.Items.Add(new ListItem(dr["phone_text"].ToString(),dr["phone_value"].ToString())); 

dListParent.Items[0].Selected = true; 
//添加下面這話的意思是當點提交按鈕提交窗體的時候第二個dListChild的狀態能夠得到保存 
dListChild.SelectedValue = Request.Form["dListChild"]; 
dr.Close(); 
conn.Close(); 



protected void BindChild(string str) 

//通過js給包括dropdownlist任何控件添加的內容不會被保存狀態 
//把參數轉化成int 
int i = Convert.ToInt32(str); 
//定義個字符串用保存從數據庫返回的數據 
string result = ""; 
//先清空輸出的東西 
Response.Clear(); 
string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString(); 
SqlConnection conn = new SqlConnection(connStr); 
SqlCommand comm = conn.CreateCommand(); 
string commStr = string.Format("select type_value,type_text from phone_type where parent_id = {0}",i); 
comm.CommandText = commStr; 
conn.Open(); 
SqlDataReader dr = comm.ExecuteReader(); 
while(dr.Read()) 

result += ","+dr[0].ToString() +"|" + dr[1].ToString(); 
//dListChild.Items.Add(new ListItem(dr[1].ToString(),dr[0].ToString())); 

//把從數據庫得到的信息輸出到客戶端 
Response.Write(result); 
//輸出完成關閉Response,以免造成不必要的輸出 
Response.Flush(); 
Response.Close(); 
dr.Close(); 
conn.Close(); 

#region Web 窗體設計器生成的代碼 
override protected void OnInit(EventArgs e) 

// 
// CODEGEN: 該調用是 ASP.NET Web 窗體設計器所必需的。 
// 
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) 

Response.Write(Request.Form["dListChild"].ToString()); 



  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved