减小字体
增大字体- ·上一篇文章：如何防止页面中的敏感信息被提取
- ·下一篇文章：ASP.NET生成n位不同的验证码
分享个极好的无刷新二级联动下拉列表,同样适用与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 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(
可能"极好的"又会带来很多的非议,但是我认为这确实很好,我看了大约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 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(