实现无刷新DropdownList联动效果

最新推荐文章于 2024-09-14 18:52:56 发布

zgh2002007

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量2.4k

点赞数

文章标签： button dataset webform textbox javascript server

本文链接：https://blog.csdn.net/zgh2002007/article/details/1406661

版权

给个最简单的
demo.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script id="clientEventHandlersJS" language="javascript">

</script>
</head>
<body MS_POSITIONING="GridLayout">
<INPUT id="Text1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" type="text" name="Text1">
<INPUT id="Button1" style="Z-INDEX: 102; LEFT: 16px; POSITION: absolute; TOP: 56px" type="button" value="Button" name="Button1" language="javascript" οnclick="return Button1_onclick()">
</body>
</html>

demo.asp
<%
Response.Write("<?xml version='1.0' encoding='gb2312' ?><theroot><ele>111</ele></theroot>")
%>

首页 | 新闻 | 技术中心 | 第二书店 | 《程序员》 | 《开发呤帧?/a> | 社区 | 黄页 | 人才

移动∣专题∣SUN∣IBM∣微软∣微创∣精华∣Donews∣人邮

我的技术中心

我的分类	我的文档
全部文章	发表文章
专栏管理	使用说明

RSS 订阅

最新文档列表

Windows/.NET

.NET (rss)

Visual C++ (rss)

Delphi (rss)

Visual Basic (rss)

ASP (rss)

JavaScript (rss)

Java/Linux

Java (rss)

Perl (rss)

综合

其他开发语言 (rss)

文件格式 (rss)

企业开发

游戏开发 (rss)

网站制作技术 (rss)

数据库

数据库开发 (rss)

软件工程

其他 (rss)

积极原创作者

iiprogram (69)

qdzx2008 (50)

goodboy1881 (14)

wangchinaking (58)

fancyhf (1)

harrymeng (41)

yjz0065 (113)

coofucoo (105)

Drate (69)

lphpc (30)

CSDN - 文档中心 - .NET

阅读：28 评论： 1 参与评论


标题	ASP.net DropDownList 无刷新联动！选择自 dhz123 的 Blog
关键字	ASP.net DropDownList 无刷新联动！
出处

<TITLE>WebForm2</TITLE>

  <SCRIPT language='javascript'>
  function load(){
    var drp2 = document.getElementById("DropDownList2");
    drp2.innerText="";
    for(var i = 0;i<=drp2.options.length -1;i++){
     drp2.remove(i);
    }
    var drp3 = document.getElementById("DropDownList3");
    for(var i = 0;i<=drp3.options.length -1;i++){
     drp3.remove(i);
    }
    var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
    var oDoc = new ActiveXObject("MSXML2.DOMDocument");
    var state=document.getElementById("DropDownList1").value;
    xmlhttp.open("POST", "webform1.aspx?id="+state,false);
    xmlhttp.send("");
    var res=oDoc.loadXML(xmlhttp.responseText);
    var naItems = oDoc.selectNodes("//Market/Table/maName");
    var idItems = oDoc.selectNodes("//Market/Table/maId");
    var item;
    var id;
    for (item = naItems.nextNode(),id=idItems.nextNode(); item&&id; item = naItems.nextNode(),id=idItems.nextNode()){
     var nastr = item.nodeTypedValue;
     var idstr = id.nodeTypedValue;
     var newOption = document.createElement("OPTION");
     newOption.text =nastr;
     newOption.value = idstr;


     drp2.options.add(newOption);
    }
    load2();

  }
  function load2(){
    var drp2 = document.getElementById("DropDownList3");
    drp2.innerText="";
    for(var i = 0;i<=drp2.options.length -1;i++){
     drp2.remove(i);
    }
    var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
    var oDoc = new ActiveXObject("MSXML2.DOMDocument");
    var state=document.getElementById("DropDownList2").value;
    xmlhttp.open("POST", "webform3.aspx?id="+state,false);
    xmlhttp.send("");
    var res=oDoc.loadXML(xmlhttp.responseText);
    var naItems = oDoc.selectNodes("//Market/Table/maName");
    var idItems = oDoc.selectNodes("//Market/Table/maId");
    var item;
    var id;
    for (item = naItems.nextNode(),id=idItems.nextNode(); item&&id; item = naItems.nextNode(),id=idItems.nextNode()){
     var nastr = item.nodeTypedValue;
     var idstr = id.nodeTypedValue;
     var newOption = document.createElement("OPTION");
     newOption.text =nastr;
     newOption.value = idstr;


     drp2.options.add(newOption);
    }

  }
  </SCRIPT>
</HEAD>
<BODY ms_positioning="GridLayout" οnlοad="load()">
  <FORM id="Form1" method="post" runat="server">
   <ASP:DROPDOWNLIST id="DropDownList1" runat="server"></ASP:DROPDOWNLIST>
   <ASP:DROPDOWNLIST id="DropDownList2" runat="server"></ASP:DROPDOWNLIST>
   <ASP:DROPDOWNLIST id="Dropdownlist3" runat="server"></ASP:DROPDOWNLIST>
  </FORM>
</BODY>
</HTML>
-----------------------
namespace dropDown
{
/// <summary>
/// WebForm2 的摘要说明。
/// </summary>
public class WebForm2 : System.Web.UI.Page
{
  protected System.Web.UI.WebControls.DropDownList DropDownList1;
  protected System.Web.UI.WebControls.DropDownList Dropdownlist3;
  protected System.Web.UI.WebControls.DropDownList DropDownList2;

  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   if(!this.IsPostBack)
   {
    SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd=");
    SqlDataAdapter da = new SqlDataAdapter("select maId,maName from tabMarket where maCls=0",con);
    DataSet ds = new DataSet();
    da.Fill(ds,"op");
    this.DropDownList1.DataSource=ds.Tables[0];
    this.DropDownList1.DataTextField = "maName";
    this.DropDownList1.DataValueField = "maId";
    this.DropDownList1.DataBind();
    this.DropDownList1.Attributes.Add("onchange","load()");
    this.DropDownList2.Attributes.Add("onchange","load2()");
   }

}

}
}
-----------------------
public class WebForm1 : System.Web.UI.Page
{

  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   // Put user code to initialize the page here
   //if(this.Request["state"]!=null)
   //{
     string id =this.Request["id"];
    SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd=;");
    SqlDataAdapter da = new SqlDataAdapter("select maName,maId from tabMarket where maParent=@id and maSt=1 ",con);
       da.SelectCommand.Parameters.Add("@id",id);
    DataSet ds = new DataSet("Market");
    da.Fill(ds);

       ds.WriteXml(Response.OutputStream);
       Response.Flush ();
       Response.End ();

   //}
  }
       }
-----------------------------
public class WebForm3 : System.Web.UI.Page
{
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   string id =Request["id"];
   SqlConnection con = new SqlConnection("server=localhost;database=star;uid=sa;pwd=;");
   SqlDataAdapter da = new SqlDataAdapter("select maName,maId from tabMarket where maParent=@id and maSt=1",con);
   da.SelectCommand.Parameters.Add("@id",id);
   DataSet ds = new DataSet("Market");
   da.Fill(ds);

   ds.WriteXml(Response.OutputStream);
   Response.Flush ();
   Response.End ();
  }
       }
------------------

作者Blog： http://blog.csdn.net/dhz123/

相关文章

ASP.net DropDownList 无刷新联动！

www.buy91.com首页

java 多态与抽象工厂-----------菜鸟学飞第二步

java接口用法学习----------------java菜鸟学飞第一步

身份证验证

对该文的评论

CSDN 网友 ( 2005-08-18)
你自己看看吧，n多隱性Bug。

【评论】【关闭】【报告bug】

网站简介－广告服务－网站地图－帮助信息－联系方式－English－问题报告

Blog

Tag

.NET

Java

关于DropDownList的无刷新二级联动问题

楼主starboy1413（小辉） 2005-11-22 08:57:22 在 .NET技术 / ASP.NET 提问

[dd.aspx.vb]
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
Call init_porvince_DropDownlist()
End If
End Sub

Private Sub init_per_DropDownList()
Dim SQLConn As SqlConnection
Dim SQLConnstr As String
SQLConnstr = ConfigurationSettings.AppSettings("SQLConnstr")
SQLConn = New SqlConnection(SQLConnstr)
SQLConn.Open()
Dim cmd As New SqlCommand
cmd.Connection = SQLConn
Dim SQLstr As String = "select id,title from suminfo_Profession_bigclass"
cmd.CommandText = SQLstr
Dim sql_adpt As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim per_big_ds As DataTable = New DataTable
sql_adpt.Fill(per_big_ds)
perb_DropDownList.DataSource = per_big_ds
perb_DropDownList.DataTextField = "title"
perb_DropDownList.DataValueField = "id"
perb_DropDownList.DataBind()
Dim big_legth As Integer = per_big_ds.Rows.Count()
Dim sbscript As New System.Text.StringBuilder
sbscript.Append("<script></script>")
Dim strscript As String = sbscript.ToString()
If (Not IsClientScriptBlockRegistered("clientScript")) Then
RegisterClientScriptBlock("clientScript", strscript)
End If
SQLstr = "SELECT id,title FROM suminfo_Profession_smallclass WHERE id=" & CInt(per_big_ds.Rows(0)(0))
cmd.CommandText = SQLstr
sql_adpt = New SqlDataAdapter(cmd)
Dim per_small_ds As DataTable = New DataTable
sql_adpt.Fill(per_small_ds)
pers_DropDownList.DataSource = per_small_ds
pers_DropDownList.DataValueField = "id"
pers_DropDownList.DataTextField = "title"
If Not IsPostBack Then pers_DropDownList.DataBind()
sql_adpt.Dispose()
cmd.Dispose()
cmd = Nothing
sql_adpt.Dispose()
sql_adpt = Nothing
per_big_ds.Dispose()
per_big_ds = Nothing
SQLConn.Close()
End Sub

[dd.aspx]
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="professions.aspx.vb" Inherits="sumdata_datacenter.professions"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>professions</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style>TD { FONT-SIZE: 9pt }
</style>
<script language="javascript">
function XmlPost3(obj,fullname,sType)
{
var svalue=obj.value;
var mytopname="";
if(sType == "1")
{
mytopname="请选择名称";
}
else
{
mytopname="请选择子类名称";
}
var fullObj=document.all(fullname);
var webFileUrl = "?sortid=" + svalue + "&sType=" + sType;
var result = "";
var xmlHttp = new ActiveXobject("MSXML2.XMLHTTP");
xmlHttp.open("POST" ,webFileUrl, false);
xmlHttp.send("");
result = xmlHttp.responseText;
if(result != "" && svalue != "")
{
fullObj.length=0;
fullObj.options.add(new Option(mytopname,""));
var piArray = result.split(",");
for(var i=0;i<piArray.length;i++)
{
var ary1 = piArray[i].toString().split("|");
fullObj.options.add(new Option(ary1[1].toString(),ary1[0],toString()));
}
}
else
{
fullObj.length = 0;
fullObj.options.add(new Option(mytopname,""));
}
if(sType == "1")
{
document.all("bc_DropDownList").length = 0;
document.all("sc_DropDownList").options.add(new Option(mytopname,""));
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="宋体">
<INPUT id="classid" type="text" runat="server" NAME="classid" style="display:none;">
<table cellpadding="0" cellspacing="0" width="96%" align="center" border="0">
<tr>
<td style="HEIGHT: 17px">
行业分类：<asp:DropDownList id="bc_DropDownList" runat="server" οnchange="redirect(this.options.selectedIndex)"></asp:DropDownList>
行业子类：<asp:DropDownList id="sc_DropDownList" runat="server" οnchange="choose(this.options.selectedIndex)"></asp:DropDownList>
 
<asp:Button id="del_bc" runat="server" Text="删除分类" Width="73"></asp:Button>
<asp:Button id="del_sc" runat="server" Text="删除子类" Width="73"></asp:Button>
</td>
</tr>
<tr>
<td height="16" style="HEIGHT: 16px"></td>
</tr>
<tr>
<td>
添加分类：<asp:TextBox id="bc_add_textbox" runat="server"></asp:TextBox>
<asp:Button id="bc_submit" runat="server" Text="添加分类" Width="73"></asp:Button>
</td>
</tr>
<tr>
<td>
添加子类：<asp:DropDownList id="bc_add_DropDownList" runat="server"></asp:DropDownList>
<asp:TextBox id="sc_add_textbox" runat="server"></asp:TextBox>
<asp:Button id="Button4" runat="server" Text="添加子类" Width="73"></asp:Button>
</td>
</tr>
</table>
</FONT>
</form>
</body>
</HTML>

以上代码是从网上找来的，开始的时候运行正常，可是把 id为1 的记录删除后总用sc_DropDownList.SelectedValue总是提不出第二个dropdownlist的值，请各位大侠指点一下，谢谢~~~~~ 问题点数：50、回复次数：14Top

src="/Include/Board.htm?Tags=.net,行业,子类,添加,分类" frameborder="0" scrolling="no">

1 楼starboy1413（小辉）回复于 2005-11-22 08:59:12 得分 0

自己先顶一下，等待ing.....................Top

2 楼niedewang（程序爱好）回复于 2005-11-22 09:01:39 得分 0

用java script 结合 .net 吧，我实现过一些小数据的联动，方法比较麻烦，顶一下，看大家有没有好的方法Top

3 楼net_lover（【孟子E章】）回复于 2005-11-22 09:03:22 得分 10

应该是你的sql语句的问题。看看每次的sql语句是否都返回了数据Top

4 楼singlepine（小山）回复于 2005-11-22 09:07:34 得分 10

http://singlepine.cnblogs.com/articles/265678.htmlTop

5 楼jiffer（爱工作，更爱老婆）回复于 2005-11-22 09:08:14 得分 0

用js+webservice吧，多爽的。Top

6 楼fphuang（人在哈尔滨--每天只能接分20分钟）回复于 2005-11-22 09:11:21 得分 10

开始的时候运行正常，可是把 id为1 的记录删除后总用sc_DropDownList.SelectedValue总是提不出第二个dropdownlist的值

--把 id为1 的记录删除后,
这个时候改变第一个dropdownlist的时候,sc_DropDownList这个跟着改变吗?
Top

7 楼starboy1413（小辉）回复于 2005-11-22 09:13:40 得分 0

fphuang(人在哈尔滨@net) :初始化的时候sc_dropdownlist里没有值，选择bc_dropdownlist后sc_dropdownlist里有值，但是用sc_dropdownlist.selectedvalue取不出来~~~~Top

8 楼fphuang（人在哈尔滨--每天只能接分20分钟）回复于 2005-11-22 09:31:10 得分 0

嗯，其实sc_dropdownlist的值是不能sc_dropdownlist.selectedvalue这样取得的，
我认为与你“可是把 id为1 的记录删除”这个过程是没有关系的；
你可以在页面上放个TextBox控件（加入控件的id为tb），使其背景色（包括前景色）与你的叶面一样（这样做的目的就是使浏览这个叶面的时候看不到他），然后在page_load的过程中加入
sc_dropdownlist.Attributes.Add("onChange","javascript:document.Form1.tb.value=this.options[this.selectedIndex].value;");

这样就在sc_dropdownlist发生变化的时候，将sc_dropdownlist.selectedvalue值就放入了tb.text中了，所以你就可以取tb.text这个值了。Top

9 楼jamily968（飞鹰）回复于 2005-11-22 09:35:12 得分 10

＜INPUT id="txtMessage"＞
＜INPUT οnclick="callToServer();" type="button" value="Call to Server"＞
Result : ＜INPUT id="txtResult" ＞

当点击按钮的时候，将调用JS脚本方法callToServer()，JS脚本如下：
function callToServer()
{
var param = document.getElementById("txtUsername").value;
var context = "";
＜% = ClientScript %＞
}

function handleResultFromServer(result, context)
{
document.getElementById("txtResult").value = result;
}

handleResultFromServer()方法则负责将从服务器传回的数据写到txtResult这个文本框里面。

再看看服务器端的代码：

public partial class Default_aspx : System.Web.UI.ICallbackEventHandler
{
private String ClientScript
{
get
{
return this.GetCallbackEventReference(this, "param", "handleResultFromServer", "context");
}
}

public string RaiseCallbackEvent(string eventArgument)
{
return "客户端在[" + DateTime.Now.ToString() + "]传送来 [" + eventArgument + "].";
}
}

我们让页面直接实现ICallbackEventHandler接口，然后接口定义的RaiseCallbackEvent()方法中将服务器的时间和传来的数据一起返回回去。

ClientScript属性的作用是，它调用了页面的GetCallbackEventReference()方法，获得了让客户端有能力调用服务器端方法的JS脚本，并输出到页面的callToServer()方法中，这样，点击页面按钮时，就开始执行页面上包含了调用服务器方法的的callToServer()方法。

注意GetCallbackEventReference()方法的参数，在参数中，我们定义了客户端的哪个变量包含了要传递给服务器，服务器方法执行后，调用客户端的哪个方法等信息。GetCallbackEventReference()的详细参看请看这里。

最后，我们这个页面的执行效果就是：

此主题相关图片如下：
Top

10 楼sunnystar365（一个人的天空）回复于 2005-11-22 10:08:12 得分 10

既然是联动，所以当你删除ID为1的记录，那另一个DROPDOWNLIST中的有关与ID编号的记录也要
删除，而且删除后也应该重新绑定才可以了。

楼主的代码是VB语言写的，这个是C#语言的，可以参考一下
http://blog.csdn.net/sunnystar365/archive/2005/09/28/491349.aspxTop