zoukankan      html  css  js  c++  java
  • 省市联动下拉菜单的实现

                                                                                                 省市联动下拉菜单的实现
    一、数据库的建立
    为了更好的实现与数据库连接,省表中需要有两个元素,一个是省编号,一个是省名称;市表中需要有三个元素,一个是市编号,一个是市名称,更重要的是这个市改隶属于那个省。
    省表(UserProvince)
    ProID    ProName
    1            河南
    2            安徽
    市表(UserCity)
    CityID    ProID    CityName
    1              1         郑州
    2              2         合肥

    二、代码
    后台:(定义两个关于省市的的函数,通过SelectedIndexChanged事件实现对市的筛选)
    protected void Page_Load(object sender, EventArgs e)
        {
                BindProvince();
                BindCity();
            }
     private void BindProvince()
            {
                string sql = "select ProID,ProName from UserProvince";
                SqlConnection conn = new SqlConnection("SqlDataSource1");
                SqlDataAdapter adapter = new SqlDataAdapter(sql, conn);
                DataSet ds = new DataSet();
                conn.Open();
                adapter.Fill(ds);
                conn.Close();
                ddlprovince.DataSource = ds.Tables[0];
                ddlprovince.DataValueField = "ProID";
                ddlprovince.DataTextField = "ProName";
                ddlprovince.DataBind();
            }
            private void BindCity()
            {
                string sql = "select CityID,ProID,CityName from UserCity; ";
                SqlConnection conn = new SqlConnection("SqlDataSource2");
                SqlDataAdapter adapter = new SqlDataAdapter(sql, conn);
                DataSet ds = new DataSet();
                conn.Open();
                adapter.Fill(ds);
                conn.Close();
                ddlCity.DataSource = ds.Tables[0];
                ddlCity.DataValueField = "CityID";
                ddlCity.DataTextField = "CityName";
                ddlCity.DataBind();
            }
    protected void ddlprovince_SelectedIndexChanged(object sender, EventArgs e)
        {
           
                int ProID = this.ddlprovince.SelectedIndex + 1;
                SqlConnection conn = new SqlConnection();
                conn.ConnectionString = "User ID=sa;Initial Catalog=News;Data Source= (local);Password=123";
                conn.Open();
                SqlCommand cmd = new SqlCommand("select * from [News].[dbo].[UserCity] where ProID='"+ProID+"'");
                cmd.Connection = conn;
                SqlDataReader sdr = cmd.ExecuteReader();
                //绑定
                this.ddlCity.DataSource = sdr;
                this.ddlCity.DataTextField = "CityName";
                this.ddlCity.DataValueField = "CityID";
                this.ddlCity.DataBind();
                sdr.Close();
                conn.Close();
            }
    }
    前台:(两个连接数据库的DropDownList控件)
     <asp:DropDownList ID="ddlprovince" runat="server" widtn="55px" DataSourceID="SqlDataSource1" DataTextField="proName" DataValueField="proID" AutoPostBack="True" OnSelectedIndexChanged="ddlprovince_SelectedIndexChanged">
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NewsConnectionString2 %>" SelectCommand="SELECT [proID], [proName] FROM [Userprovince]"></asp:SqlDataSource>
                                        <asp:DropDownList ID="ddlCity" runat="server" widtn="55px"  DataTextField="cityName" DataValueField="cityID" AutoPostBack="True">
                                        </asp:DropDownList>
                                        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NewsConnectionString3 %>" SelectCommand="SELECT [cityID], [proID], [cityName] FROM [UserCity]"></asp:SqlDataSource>

  • 相关阅读:
    CentOS7下Elastic Stack 5.0日志分析系统搭建
    ElasticSearch 简单入门
    简单使用packetbeat
    centos7没有安装ifconfig命令的解决方法
    CentOS系统下docker的安装与卸载
    centos7 cannot find a valid baseurl for repo base
    HP P2xxx/MSA SMI-S Provider
    Zookeeper 的学习与运用
    kafka入门:简介、使用场景、设计原理、主要配置及集群搭建(转)
    利用开源架构ELK构建分布式日志系统
  • 原文地址:https://www.cnblogs.com/xue-er/p/8012347.html
Copyright © 2011-2022 走看看