asp.net js实现dropdownlist二级联动（动态）

最新推荐文章于 2024-04-26 16:47:03 发布

AsahiXiao

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量3k

点赞数

分类专栏： C# Code 文章标签： asp.net dataset javascript server xhtml string

C# Code 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

code：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="111.aspx.cs" Inherits="Solution2_usercontrol_111" %>

<%@ Register TagPrefix="uc1" TagName="SfDqJs" Src="SfDqJs.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

</head>

<body>

<div>

<uc1:SfDqJs id="SfDqJs1" runat="server"></uc1:SfDqJs>

<asp:DropDownList ID="dropSf" runat="server">

</asp:DropDownList>

<asp:DropDownList ID="dropDq" runat="server">

</asp:DropDownList></div>

</form>

</center>

</body>

</html>

CS端代码：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

public partial class Solution2_usercontrol_111 : System.Web.UI.Page

{

private string strSql;

protected void Page_Load(object sender, EventArgs e)

{

if (!this.IsPostBack)

{

dropSf.Items.Add("请选择");

dropSf.Items[0].Selected = true;

dropSfDataBind();

}

private void dropSfDataBind()

{

//省份绑定

strSql = "select bigid,bigtype from big";

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["connectstring"].ConnectionString);

SqlDataAdapter da = new SqlDataAdapter(strSql, conn);

DataSet ds = new DataSet();

da.Fill(ds);

if (ds.Tables[0].Rows.Count > 0)

{

dropSf.DataSource = ds;

dropSf.DataTextField = "bigtype";

dropSf.DataValueField = "bigid";

dropSf.DataBind();

dropSf.Items.Add("请选择");

dropSf.Items[ds.Tables[0].Rows.Count].Selected = true;

}

dropSf.Attributes.Add("onchange", "javascript:Sfonchange(this.value);");//添加JS省份改变事件

}

接下来呢，就是web control喽。。。

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SfDqJs.ascx.cs" Inherits="Solution2_usercontrol_SfDqJs" %>

Response.Write("<script language=javascript>");

Response.Write("var aryDq = new Array(");

string strSql = "select bigid,smallid,smalltype from small";

System.Data.DataSet ds = new System.Data.DataSet();

System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings["connectstring"].ConnectionString);

System.Data.SqlClient.SqlDataAdapter da=new System.Data.SqlClient.SqlDataAdapter(strSql,conn);

da.Fill(ds);

//ds = db.GetDataSet(strSql,ds);

int itbRowCount = ds.Tables[0].Rows.Count;

int i = 0;

foreach(System.Data.DataRow row in ds.Tables[0].Rows)

{

Response.Write("new Array('" + row[0].ToString() + "','" + row[1].ToString() + "','" + row[2].ToString() + "'),");

}

Response.Write("new Array('0','0','0')");

ds.Dispose();

ds = null;

Response.Write(");");

Response.Write("alert(aryDq);</script>");

function Sfonchange(sfId)

{

debugger

var dropDq=document.getElementById("dropDq");

if (sfId!="")

{

var Dqstr="";j=0,p=0;

for (i=0;i<aryDq.length;i++)

{

if (aryDq[i][0]==sfId)

{

j=j+1;

Dqstr=Dqstr+aryDq[i][1]+","+aryDq[i][2]+",";

}

dropDq.length=j+1; //document.Form1.

aryDq1=Dqstr.split(",");

dropDq.options[0].value="0";

dropDq.options[0].text = "请选择所在城市"; //document.Form1.

for (i=1;i<=j;i++)

{

if(aryDq1[p] != null && aryDq1[p] != "")

{

dropDq.options[i].value = aryDq1[p]; //document.Form1.

dropDq.options[i].text = aryDq1[p+1]; //document.Form1.

}

p=p+2;

}

</script>

数据库表结构也给大家参考一下：

大类表：

小类表：

大类表内容：

小类表内容：

其中在web control中有一条SQL语句，是读取小类表中内容的，这里写的时候，列名一定要注意哦。。。先是大类ID，小类ID，再是小类内容列，如果说列的顺序错误的话，是得不到我们想要的结果的，我试过，大家可以试试看，有问题一起讨论喽。。。

AsahiXiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net js实现dropdownlist二级联动（动态）

code：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 无标题页
复制链接

扫一扫