DropDownList 连动两个 - stript-优快云博客

本文介绍了一个使用ASP.NET实现的省市联动下拉框案例。通过后台数据库获取省市数据，并利用JavaScript进行页面动态更新，实现了根据省份选择自动更新对应城市的功能。文章详细展示了代码实现过程，包括如何设置下拉框的onchange事件、生成存储省市对应关系的数组以及如何在用户选择省份时动态填充城市选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Default2.aspx

<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="t1" runat="server">
</asp:DropDownList>
 
<asp:DropDownList ID="t2" runat="server">
</asp:DropDownList> 
<br />
<input id="Hidden_t1" runat="server" type="hidden" />
<input id="Hidden_t1_index" runat="server" type="hidden" />
<input id="Hidden_t2" runat="server" type="hidden" />
<input id="Hidden_t2_index" runat="server" type="hidden" /><br />
  

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> 
</form>
</body>
</html>

Default2.aspx.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;

public partial class Default2 : System.Web.UI.Page
{
conn con = new conn();
protected void Page_Load(object sender, EventArgs e)
{
///
///加载 DropDownList t1 t2 onchange 事件
///
t1.Attributes.Add("onchange", "tj1()");
t2.Attributes.Add("onchange", "jl()");
///
///生成 myArray 数组
///myArray[i][0] 为 t1 的值
///myArray[i][j] 为 t2 的值
///
//***********************************************************************************************//
//数组
string myArr = "var myArray = [];";
//省
DataTable dt = new DataTable();
dt = con.Table("select * from dq_sheng");
int chang = dt.Rows.Count;
string[,] sheng = new string[2, chang];
for (int i = 0; i < chang; i++)
{
sheng[0, i] = dt.Rows[i]["prov_id"].ToString().Trim();
sheng[1, i] = dt.Rows[i]["prov_name"].ToString().Trim();
//数组
myArr += "myArray[" + i.ToString() + "] = [];\r\n";
}

//市
DataTable dt1 = new DataTable();
dt1 = con.Table("select * from dq_shiqu");
for (int i = 0; i < chang; i++)
{
//数组
myArr += "myArray[" + i.ToString() + "][0] = '" + sheng[1, i] + "';\r\n";

DataRow[] dr = dt1.Select("prov_id='" + sheng[0, i] + "'");
for (int j = 0; j < dr.Length; j++)
{
myArr += "myArray[" + i.ToString() + "][" + (j + 1).ToString() + "] = '" + dr[j]["city_name"].ToString().Trim() + "';\r\n";
}
}
//***********************************************************************************************//
///
///逻辑
///
string scr_lj = "for(var i=0;i<myArray.length;++i)" + "\r\n";
scr_lj += "{" + "\r\n";
scr_lj += "var oOption = document.createElement('OPTION');" + "\r\n";
scr_lj += "oOption.text = myArray[i][0];" + "\r\n";
scr_lj += "oOption.value = i;" + "\r\n";
scr_lj += "document.getElementById('t1').options.add(oOption);" + "\r\n";
scr_lj += "}" + "\r\n";
scr_lj += "document.getElementById('t1').selectedIndex=0;" + "\r\n";
scr_lj += "tj1();" + "\r\n";

///
///当选择
///DropDownList t1 onchange 事件时发生
///
string src_t1_change = "<script type='text/javascript'>" + "\r\n";
src_t1_change += "function tj1()" + "\r\n";
src_t1_change += "{ " + "\r\n";
src_t1_change += "var y=document.getElementById('t1').options[document.getElementById('t1').selectedIndex].value;" + "\r\n";
src_t1_change += "for(var i=document.getElementById('t2').options.length-1;i>=0;--i)" + "\r\n";
src_t1_change += "{" + "\r\n";
src_t1_change += "document.getElementById('t2').options.remove(i);" + "\r\n";
src_t1_change += "}" + "\r\n";
src_t1_change += "for(var j=1;j<myArray[y].length;j++)" + "\r\n";
src_t1_change += "{" + "\r\n";
src_t1_change += "var oOption = document.createElement('OPTION');" + "\r\n";
src_t1_change += "oOption.text = myArray[y][j];" + "\r\n";
src_t1_change += "oOption.value = myArray[y][j];" + "\r\n";
src_t1_change += "document.getElementById('t2').options.add(oOption);" + "\r\n";
src_t1_change += "}" + "\r\n";
src_t1_change += "jl();" + "\r\n";
src_t1_change += "}" + "\r\n";
src_t1_change += "</script>" + "\r\n";

///
///记录两个DropDownList 的值
///
string src_jl = "<script type='text/javascript'>" + "\r\n";
src_jl += "function jl()" + "\r\n";
src_jl += "{" + "\r\n";
src_jl += "document.getElementById('Hidden_t1').value=document.getElementById('t1').options[document.getElementById('t1').selectedIndex].text;" + "\r\n";
src_jl += "document.getElementById('Hidden_t2').value=document.getElementById('t2').options[document.getElementById('t2').selectedIndex].text;" + "\r\n";
src_jl += "document.getElementById('Hidden_t1_index').value=document.getElementById('t1').selectedIndex;" + "\r\n";
src_jl += "document.getElementById('Hidden_t2_index').value=document.getElementById('t2').selectedIndex;" + "\r\n";
src_jl += "}" + "\r\n";
src_jl += "</script>" + "\r\n";

//加载
Page.RegisterStartupScript("scr1", src_jl);
Page.RegisterStartupScript("scr2", src_t1_change);
Page.RegisterStartupScript("scr3", "<script>" + myArr + scr_lj + "</script>");

//如果不是第一次
if (Page.IsPostBack)
{
Page.RegisterStartupScript("scr4", "<script>document.getElementById('t1').selectedIndex=" + Hidden_t1_index.Value + ";tj1();document.getElementById('t2').selectedIndex=" + Hidden_t2_index.Value + ";</script>");
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Page.Response.Write(Hidden_t1.Value + Hidden_t2.Value);
}
}