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

分享個極好的無刷新二級聯動下拉列表,同樣適用與firefox

編輯:.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" ) 
            { 
  &
nbsp;            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!="")//如果返回的數據不是空
                  {
                  &
nbsp;  //把收到的字符串按照,分割成數組
                     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"
    runat="server">
    <asp:ListItem Value="100">摩托羅拉</ASP:ListItem>
    <asp:ListItem Value="101">諾基亞</ASP:ListItem>
   </ASP:DropDownList>
   <ASP:DropDownList id="dListChild"
    runat="server"></ASP:DropDownList>
   <ASP:Button id="Button1" runat="server"
    Text="Button"></ASP:Button>
  </form>
 </body>
</HT
ML>

後台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(ne
w 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());
  }
 }
}


數據表:
主鍵id     parent_id(int)          type_value(int)     type_text(varchar)
int遞增   父下拉框的value值        下拉框的value        下拉框的text

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