一个无刷新二级联动下拉列表gi7Z[1]_
测试平台:ie6,firefox"{.X8B5s‑L8aS
功能:二级无刷新连动
Ll#D3H 特点:跨浏览器;提交窗体取第二下拉框的值;数据来源于数据库;以xmlhttp来发送请求,实现无刷新)Ds4L.dF1s N0L%Rn
请求:如果您能够找到更好的方法请告诉我,非常感谢,您的批评和建议对我是莫大的鼓励
webform1.aspx:
I‑OhI+D,x <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="drop.WebForm1" %>
‑r
w2M

Tr <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>,x5Z!`1u8Bx,G4j
   <HEAD>T9x&e Nz$Sk B
         <title>WebForm1</title>9bV4cbbEz
         <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> Nh q4I[1]d;]
         <meta name="CODE_LANGUAGE" Content="C#">
         <meta name="vs_defaultClientScript" content="JavaScript">
         <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

P-cr5Os0a Bs3Zd
         <script language="javascript">
            //jb函数会根据不同的浏览器初始化个xmlhttp对象
            function jb()$I)Z!^,F2U:Y*L
            {
               var A=null;

Q;UB)aJ r5^ Q
            try
            {,k Ug "K[1]h?/".v
               A=new ActiveXObject("Msxml2.XMLHTTP");'O ?.cW jV
            }
@

_ nl&x5R5_;c#q                catch(e)K]]3u#"
               {bL-nY Q] Bd w
               try9d[1]E&s

S+a G7"
               {
                  A=new ActiveXObject("Microsoft.XMLHTTP");-G!"O{e[1]z*e4Q?7T
               }
                     catch(oc)
                  {
                  A=null
s

u(HB-Vl*`

I ~ }
}

qE0PN6e,nIY          if ( !A && typeof XMLHttpRequest != "undefined" )
         {
            A=new XMLHttpRequest()
&Q!NR

L_7v }1t[1]_I""V?)XN0]#F(Vy
return A*`0k!V1s Jk;s%VZ A

O
            }
AEk'v.i
            //下面Go函数是父列表框改变的时候调用，参数是选择的条目ry-C

M":Z'O:Px+a f
function Go(obj)

"2x3H*sS F {6d/r2@ef6o9we H
//得到选择框的下拉列表的value1B

|3X8{9tR0t[1]U
var svalue = obj.value;(xC[1]b*I t#F ` R
//定义要处理数据的页面
*Os/W"K+iN

k
mxo                var weburl = "webform1.aspx?parent_id="+svalue;
               //初始化个xmlhttp对象,c HT"g*Di-z2g~,H
               var xmlhttp = jb();
               //提交数据，第一个参数最好为get，第三个参数最好为true
               xmlhttp.open("get",weburl,true); Y

D
T|*X2v‑v;q
            // alert(xmlhttp.responseText); ? Q/" iE‑N't
               //如果已经成功的返回了数据"EUn)X:M,u
               xmlhttp.onreadystatechange=function()
?_                {
               if(xmlhttp.readyState==4)//4代表成功返回数据
                  { lZ Y
Q&W9Z7DW

eh m
var result = xmlhttp.responseText;//得到服务器返回的数据@.r;pQ;_
//先清空dListChild的所有下拉项
)r!a#C

KmOJ9Ye document.getElementById("dListChild").length = 0;,b

Wa$z8E

r
                     //给dListChild加个全部型号的,注意是Option不是option&R#@V3_
TP-T
                     document.getElementById("dListChild").options.add(new Option("全部型号","0"));
o q'y                      if(result!="")//如果返回的数据不是空+b,WQ x){4Z6G1u9^
                     {
                        //把收到的字符串按照，分割成数组
                        var allArray = result.split(",");e7q&fTy0["K}
                     //循环这个数组，注意是从1开始，因为收到的字符串第一个字符是，号，所以分割后第一个数组为空~-~%m6o/";H ]!e.O
                        for(var i=1;i<allArray.length;i++)
                        {
                           //在把这个字符串按照|分割成数组
                        var thisArray = allArray[i].split("|");
                           //为dListChild添加条目
6[
]hM#j3t%F,p

b document.getElementById("dListChild").options.add(new Option(thisArray[1].toString(),thisArray[0].toString()));
7j$U H1q.`yD x

g                         }
                     }~6YG3g q,D2F:h6bA+G
                  }
(l

K%D
N/H#yU }
;lw

{;bo.G.nCl                //发送数据，请注意顺序和参数，参数一定为null或者""
               xmlhttp.send(null);B P/V)qA
            }|@E_ W'c7j X$y
         </script>
   </HEAD>8s
Z'G/D_k7|7O:g
   <body MS_POSITIONING="GridLayout">
P‑{/@          <form id="Form1" method="post" runat="server">.K-c w

i@[1]r/r
<asp:DropDownList onchange="Go(this)" id="dListParent" style="Z-INDEX: 101; LEFT: 248px; POSITION: absolute; TOP: 40px"-_3@;k,Tg

m3@
                     runat="server">
p;j~.c,N,M5S                      <asp:ListItem Value="100">摩托罗拉</asp:ListItem>l7|_E‑S
} `^
                     <asp:ListItem Value="101">诺基亚</asp:ListItem>
r&yB‑w%_"n                </asp:DropDownList>O!Q$Pt!X Xe h l
               <asp:DropDownList id="dListChild" style="Z-INDEX: 102; LEFT: 248px; POSITION: absolute; TOP: 104px"{ |JGM8SC:R
                     runat="server"></asp:DropDownList>!a"r&N h ozCD7jk
               <asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 256px; POSITION: absolute; TOP: 176px" runat="server"
LP&s9I9Ns r                      Text="Button"></asp:Button>$Pd,XD#zWL O
         </form> U$_iJ

oX&oX G
</body> h"$~ V#qq;b
</HTML> z%X!fQ!n!s;} j,?

l*[0x8~$M kM

Dr5Kn 后台webform1.aspx.cs:
using System;O(A zC;Jt;R
using System.Collections;
using System.ComponentModel; OLV3x(_1h
using System.Data;
using System.Drawing;%i(vy

Ap&?~(`‑@$V7lU
using System.Web;P"Q uj'w,O!ag
using System.Web.SessionState;
using System.Web.UI;d"^!`,M[1]cF
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Configuration;u7"5O$"
E LY1v6_;w
using System.Data.SqlClient;~#lK

m/uk$@ y

namespace drop
)_

d9p"-ZF U")Q3d {7Jk4ckR4M
/// <summary>*wuJ k]/]%Z(B
/// WebForm1 的摘要说明。g8S&B5A:V!Q7h-l
/// </summary>
'x2[ Ve

`;T4t/@ public class WebForm1 : System.Web.UI.Page
{
|u0g.YvS'O6USe~
protected System.Web.UI.WebControls.DropDownList dListParent;
;T

k"UV8PH'|   protected System.Web.UI.WebControls.Button Button1;
  protected System.Web.UI.WebControls.DropDownList dListChild;[ E7l.BP/v

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

gcGk@ // 在此处放置用户代码以初始化页面-p Ul|l*e$U
//if(!IsPostBack)[1]s*@[1]M{XD

d
//{0|3r7V U!_
G
BindDrop();//这里不能够放到if(!IsPostBack)里面
//}
}6gF3w v6K:]"0":o3?m

Tka:a1vKl)a
protected void BindDrop()
{
&B(@7yWq-|T

Q0uM" //首先我想父dropdownlist也绑定数据库,后面想没必要
//if(!IsPostBack)
//{5m-L4z8X:bT
//绑定父dListParentV*M+vZD;[C

C+o
// BindParent(); h;z8F5~)V‑]zf[1]g
//}
X` //获得传递过来的parent_id值,如果是第一次请求他为null
string str = Request.QueryString["parent_id"];,^8hc7]*Y9D3~q‑OGe
string str1 = dListParent.SelectedValue;;t.Y9y/K)_:V#V
//Response.Write(str1);N
r Gra'bjb%?i
//如果str加个字符串!=原来的字符串则说明触发过dListParent的onchange事件
X"cd"*n-f:F0}6TE-L'ZJ if((str+"abc")!="abc")'e!Ou&Z%C(z
{
//绑定 dListChild控件

{d]3}I3{!g-t j0c BindChild(str);//把传来的父DropDownList的value做为参数
}
else
Gg5J+sU!j&v

P o(x BindParent(str1);
?'d)F

?a,m O[Lj }
;g O_8`R

Y"M`

protected void BindParent(string str)
{
//如果是第一次请求或者是刷新这个页面则根据dListParent的值来选择
//把参数转化成int
int i = Convert.ToInt32(str);^nuC

jC
dListChild.Items.Clear();T3ua b8eB
dListChild.Items.Add(new ListItem("全部型号","0"));d"o!r4d3D
//得到数据库连接字符串

@.h Cm#o1[l string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString();
//初始化个conn对象
SqlConnection conn = new SqlConnection(connStr);?Y/AI W;A!b
//数据库语句!b7eo/_ f
string commStr = string.Format("select type_value,type_text from phone_type where parent_id={0}",i);
//建立数据库命令对象

H(h&d g8C"o&l;]t4q
SqlCommand comm = new SqlCommand(commStr,conn);
*Y$s6ra

uh //打开数据库
conn.Open();
//执行命令
@4hC)}vO0@
SqlDataReader dr = comm.ExecuteReader();
//循环dr，给dListParent添加条目!_"DT

v‑V(?w"x)T]'H
while(dr.Read())
{‑}.jk)Y kc3d#B9|
dListChild.Items.Add(new ListItem(dr[1].ToString(),dr[0].ToString()));
j6uc

O*vV‑^7| i#h k //也可以这样3~'yi3{H
//dListParent.Items.Add(new ListItem(dr["phone_text"].ToString(),dr["phone_value"].ToString()));9Tc9wW$st o
}
//添加下面这话的意思是当点提交按钮提交窗体的时候第二个dListChild的状态能够得到保存
dListChild.SelectedValue = Request.Form["dListChild"];!E
T/z&CL!q T
dr.Close();
conn.Close(); D‑~X(j7tm&W+H"T9h
}J9d3wR{ m&q3`_!~
Y;t J{ B

]A7eE
h-X1V1b

v
  protected void BindChild(string str)
  {
   //通过js给包括dropdownlist任何控件添加的内容不会被保存状态
//把参数转化成int? |&L1_;DR f~
int i = Convert.ToInt32(str);G O(V!v

k
//定义个字符串用保存从数据库返回的数据^t+u O!T,A-|;j%e
string result = "";
//先清空输出的东西l {W*Z!d9]"
Response.Clear();0H mQ3D2_+L
string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString();
SqlConnection conn = new SqlConnection(connStr);
SqlCommand comm = conn.CreateCommand();5{9Z"~^o

[:N]S9A
string commStr = string.Format("select type_value,type_text from phone_type where parent_id = {0}",i);
comm.CommandText = commStr;
conn.Open();xG)D9m1[ N
SqlDataReader dr = comm.ExecuteReader();@1H?5D(CJw4}?6e
while(dr.Read())1n(z

y6g'L}
{ O$I Ee/Zx:u‑}
result += ","+dr[0].ToString() +"|" + dr[1].ToString();
//dListChild.Items.Add(new ListItem(dr[1].ToString(),dr[0].ToString()));Z5tF*j5S^ife(t
}
//把从数据库得到的信息输出到客户端)z+M.N-sRW
Response.Write(result);[1]{*n'Y fDV[1]BZ
Q
//输出完成关闭Response,以免造成不必要的输出
j2fR~
q8` Response.Flush();
Response.Close();
dr.Close();N+fX

aq~ V

{%a
conn.Close();
  }
u5Og&`3E{   #region Web 窗体设计器生成的代码 p{ X9M:T9D
  override protected void OnInit(EventArgs e)xD7]CB)J9M(K/o
  {
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。u‑DpZl]H5f*]
//"Za2f&Z0Lst
InitializeComponent();
base.OnInit(e);
y

G+r LD!D.F)?2r }^6Q v)y+o`;E8QE-E
pVq:F

{y+YN
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改#pA*z"J.u0~!Kx
  /// 此方法的内容。 A

^&uJS0d
/// </summary>
&s;v

E*"

g { private void InitializeComponent() z)M~ ]3`vB
{
} this.Button1.Click += new System.EventHandler(this.Button1_Click);
this.Load += new System.EventHandler(this.Page_Load);

x

? ^7w‑]5k   }
  #endregion9IGn‑e_
DF[.]H

  private void Button1_Click(object sender, System.EventArgs e)!B w:M p%j9Ji" m
  { L^*g^yji
Response.Write(Request.Form["dListChild"].ToString());#AV`7t&iXfm
  }2R K&K{QW
}H'Nm2pJZf#Z_E
}

posted on 2008-03-31 15:37 karlen 阅读(644) 评论(0) 收藏举报

刷新页面返回顶部

导航