可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约20个无刷新的连动下拉列表,他们在firefox下面就一团糟.为了这个我差不多搞了两天,就是如果提交窗体后如何保持第二个列表框的值,因为通过js给下拉框添加条目那么他的状态是不会被保存的测试平台:ie6,firefox
功能:二级无刷新连动
特点:跨浏览器;提交窗体取第二下拉框的值;数据来源于数据库;以xmlhttp来发送请求,实现无刷新
请求:如果您能够找到更好的方法请告诉我,非常感谢,您的批评和建议对我是莫大的鼓励
webform1.aspx:
<%@Pagelanguage="c#"Codebehind="WebForm1.aspx.cs"AutoEventWireup="false"Inherits="drop.WebForm1"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<metaname="GENERATOR"Content="MicrosoftVisualStudio.NET7.1">
<metaname="CODE_LANGUAGE"Content="C#">
<metaname="vs_defaultClientScript"content="JavaScript">
<metaname="vs_targetSchema"content="http://schemas.microsoft.com/intellisense/ie5">
<scriptlanguage="javascript">
//jb函数会根据不同的浏览器初始化个xmlhttp对象
functionjb()
{
varA=null;
try
{
A=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
A=newActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
A=null
}
}
if(!A&&typeofXMLHttpRequest!="undefined")
{
A=newXMLHttpRequest()
}
returnA
}
//下面Go函数是父列表框改变的时候调用，参数是选择的条目
functionGo(obj)
{
//得到选择框的下拉列表的value
varsvalue=obj.value;
//定义要处理数据的页面
varweburl="webform1.aspx?parent_id="+svalue;
//初始化个xmlhttp对象
varxmlhttp=jb();
//提交数据，第一个参数最好为get，第三个参数最好为true
xmlhttp.open("get",weburl,true);
//alert(xmlhttp.responseText);
//如果已经成功的返回了数据
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)//4代表成功返回数据
{
varresult=xmlhttp.responseText;//得到服务器返回的数据
//先清空dListChild的所有下拉项
document.getElementById("dListChild").length=0;
//给dListChild加个全部型号的,注意是Option不是option
document.getElementById("dListChild").options.add(newOption("全部型号","0"));
if(result!="")//如果返回的数据不是空
{
//把收到的字符串按照，分割成数组
varallArray=result.split(",");
//循环这个数组，注意是从1开始，因为收到的字符串第一个字符是，号，所以分割后第一个数组为空
for(vari=1;i<allArray.length;i++)
{
//在把这个字符串按照|分割成数组
varthisArray=allArray[i].split("|");
//为dListChild添加条目
document.getElementById("dListChild").options.add(newOption(thisArray[1].toString(),thisArray[0].toString()));
}
}
}
}
//发送数据，请注意顺序和参数，参数一定为null或者""
xmlhttp.send(null);
}
</script>
</HEAD>
<bodyMS_POSITIONING="GridLayout">
<formid="Form1"method="post"runat="server">
<asp:DropDownListonchange="Go(this)"id="dListParent"style="Z-INDEX:101;LEFT:248px;POSITION:absolute;TOP:40px"
runat="server">
<asp:ListItemValue="100">摩托罗拉</asp:ListItem>
<asp:ListItemValue="101">诺基亚</asp:ListItem>
</asp:DropDownList>
<asp:DropDownListid="dListChild"style="Z-INDEX:102;LEFT:248px;POSITION:absolute;TOP:104px"
runat="server"></asp:DropDownList>
<asp:Buttonid="Button1"style="Z-INDEX:103;LEFT:256px;POSITION:absolute;TOP:176px"runat="server"
Text="Button"></asp:Button>
</form>
</body>
</HTML>
后台webform1.aspx.cs:
usingSystem;
usingSystem.Collections;
usingSystem.ComponentModel;
usingSystem.Data;
usingSystem.Drawing;
usingSystem.Web;
usingSystem.Web.SessionState;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.HtmlControls;
usingSystem.Configuration;
usingSystem.Data.SqlClient;
namespacedrop
{
///<summary>
///WebForm1的摘要说明。
///</summary>
publicclassWebForm1:System.Web.UI.Page
{
protectedSystem.Web.UI.WebControls.DropDownListdListParent;
protectedSystem.Web.UI.WebControls.ButtonButton1;
protectedSystem.Web.UI.WebControls.DropDownListdListChild;
privatevoidPage_Load(objectsender,System.EventArgse)
{
//在此处放置用户代码以初始化页面
//if(!IsPostBack)
//{
BindDrop();//如果不是提交回来就绑定列表框
//}
}
protectedvoidBindDrop()
{
//首先我想父dropdownlist也绑定数据库,后面想没必要
//if(!IsPostBack)
//{
//绑定父dListParent
//BindParent();
//}
//获得传递过来的parent_id值,如果是第一次请求他为null
stringstr=Request.QueryString["parent_id"];
stringstr1=dListParent.SelectedValue;;
Response.Write(str1);
//如果str加个字符串!=原来的字符串则说明触发过dListParent的onchange事件
if((str+"abc")!="abc")
{
//绑定dListChild控件
BindChild(str);//把传来的父DropDownList的value做为参数
}
else
BindParent(str1);
}
protectedvoidBindParent(stringstr)
{
//如果是第一次请求或者是刷新这个页面则根据dListParent的值来选择
//把参数转化成int
inti=Convert.ToInt32(str);
dListChild.Items.Clear();
dListChild.Items.Add(newListItem("全部型号","0"));
//得到数据库连接字符串
stringconnStr=ConfigurationSettings.AppSettings["ConnString"].ToString();
//初始化个conn对象
SqlConnectionconn=newSqlConnection(connStr);
//数据库语句
stringcommStr=string.Format("selecttype_value,type_textfromphone_typewhereparent_id={0}",i);
//建立数据库命令对象
SqlCommandcomm=newSqlCommand(commStr,conn);
//打开数据库
conn.Open();
//执行命令
SqlDataReaderdr=comm.ExecuteReader();
//循环dr，给dListParent添加条目
while(dr.Read())
{
dListChild.Items.Add(newListItem(dr[1].ToString(),dr[0].ToString()));
//也可以这样
//dListParent.Items.Add(newListItem(dr["phone_text"].ToString(),dr["phone_value"].ToString()));
}
dListParent.Items[0].Selected=true;
//添加下面这话的意思是当点提交按钮提交窗体的时候第二个dListChild的状态能够得到保存
dListChild.SelectedValue=Request.Form["dListChild"];
dr.Close();
conn.Close();
}
protectedvoidBindChild(stringstr)
{
//通过js给包括dropdownlist任何控件添加的内容不会被保存状态
//把参数转化成int
inti=Convert.ToInt32(str);
//定义个字符串用保存从数据库返回的数据
stringresult="";
//先清空输出的东西
Response.Clear();
stringconnStr=ConfigurationSettings.AppSettings["ConnString"].ToString();
SqlConnectionconn=newSqlConnection(connStr);
SqlCommandcomm=conn.CreateCommand();
stringcommStr=string.Format("selecttype_value,type_textfromphone_typewhereparent_id={0}",i);
comm.CommandText=commStr;
conn.Open();
SqlDataReaderdr=comm.ExecuteReader();
while(dr.Read())
{
result+=","+dr[0].ToString()+"|"+dr[1].ToString();
//dListChild.Items.Add(newListItem(dr[1].ToString(),dr[0].ToString()));
}
//把从数据库得到的信息输出到客户端
Response.Write(result);
//输出完成关闭Response,以免造成不必要的输出
Response.Flush();
Response.Close();
dr.Close();
conn.Close();
}
#regionWeb窗体设计器生成的代码
overrideprotectedvoidOnInit(EventArgse)
{
//
//CODEGEN:该调用是ASP.NETWeb窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
///<summary>
///设计器支持所需的方法-不要使用代码编辑器修改
///此方法的内容。
///</summary>
privatevoidInitializeComponent()
{
this.Button1.Click+=newSystem.EventHandler(this.Button1_Click);
this.Load+=newSystem.EventHandler(this.Page_Load);
}
#endregion
privatevoidButton1_Click(objectsender,System.EventArgse)
{
Response.Write(Request.Form["dListChild"].ToString());
}
}
}