当前页面位置: » 丰搜网 » 文档中心 » 详细内容
分享个极好的无刷新二级联动下拉列表,同样适用与firefox
转自:动态网制作指南 www.knowsky.com
可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约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());
}
}
}
数据表:
主键id parent_id(int) type_value(int) type_text(varchar)
int递增 父下拉框的value值 下拉框的value 下拉框的text
