ASP.NET 两个DropDownList控件的动态联动

最新推荐文章于 2024-04-10 21:15:25 发布

原创最新推荐文章于 2024-04-10 21:15:25 发布 · 4.3k 阅读

20 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#dropdownlist联动

.net 专栏收录该内容

2 篇文章

订阅专栏

引入：在网页中，我们经常会使用的到两个或者两个以上的下拉框的联动，即当一个从动Dropdrownlist控件的内容会随着主动Dropdownlist空间内容的改变而改变。如图：

当我们选中吉林省时对应的省内各市显示出来。这里我们以省市为了列子，首先建立两个数据库，省，和市对应省编号的数据库如下图。

省表

地市表

前端web页面代码：

WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="dddd.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList><asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
    </div>
    </form>
</body>
</html>

后台代码：

WebForm1.aspx.cs

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
namespace dddd
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        DataTable db1 = new DataTable();
        string strsql = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\Database1.mdf;Integrated Security=True";

        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable db = new DataTable();
            if (!this.IsPostBack)
            {
                using (SqlConnection con = new SqlConnection(strsql))
                {
                    string str = "select * from city";
                    using (SqlCommand cmd=new SqlCommand(str, con))
                    {                      
                        using (SqlDataAdapter adpter = new SqlDataAdapter(cmd))
                        {
                            adpter.Fill(db);
                        }
                    }
                }
                this.DropDownList1.DataSource = db;
                this.DropDownList1.DataTextField = "proName";
                this.DropDownList1.DataValueField = "proID";
                this.DropDownList1.DataBind();

                string cmdText = "select * from province where proID=@proID";
                using (SqlCommand cmdQc = new SqlCommand(cmdText, new SqlConnection(strsql)))
                {
                    SqlParameter par = new SqlParameter("@proID", this.DropDownList1.SelectedValue);
                    cmdQc.Parameters.Add(par);
                    using (SqlDataAdapter adpter=new SqlDataAdapter(cmdQc))
                    {
                        adpter.Fill(db1);
                    }
                }
                this.DropDownList2.DataSource = db1;

                this.DropDownList2.DataTextField = "cityName";
                this.DropDownList2.DataValueField = "cityID";
                this.DropDownList2.DataBind();

            }
        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            DataTable db2 = new DataTable();
            string sqlstr = "select * from  province where proID=@proID";
            using (SqlConnection con = new SqlConnection(strsql))
            {
                using (SqlCommand cmd = new SqlCommand(sqlstr, con))
                {
                    SqlParameter par = new SqlParameter("@proID", DropDownList1.SelectedValue);
                    cmd.Parameters.Add(par);
                    using (SqlDataAdapter adpter = new SqlDataAdapter(cmd))
                    {
                        adpter.Fill(db2);
                    }
                }
            }


            this.DropDownList2.DataSource = db2;  
           this.DropDownList2.DataTextField = "cityName";
           this.DropDownList2.DataValueField = "cityID";
           this.DropDownList2.DataBind();
        }
    }
}

配置文件 webconfig

总结：

当我们更改第一个下拉框中的内容后，会触发第一个文本框的SelectedIndexChanged事件。将第一个下拉框的proID（省的ID）作为参数，即可查到其市的内容。

代码：点击打开链接