详细内容
联动菜单的制作方法,js方式和.net后台数据绑定两种方式
发布日期:2010-06-15     点击:4707     字体:[ ]

说明:

联动菜单的原理:第二个下拉列表根据第一个下拉列表内容重新绑定数据,这里介绍两种联动菜单,一个是JS方式实现,一个是.net数据绑定方式实现

1.JS方式实现

JS脚本:

<script language="javascript">

function ddlChanged()
{
 var ddlPro = document.getElementById("ddlPro");
 var ddlCity=document.getElementById("ddlCity");
 
 ddlCity.options.length = 0;
 
 if(ddlPro.value == "sd")
 {
  ddlCity.options.add(new Option("菏泽","01"));
  ddlCity.options.add(new Option("济南","02"));
  ddlCity.options.add(new Option("青岛","03"));
 }
 else if(ddlPro.value == "js")
 {
  ddlCity.options.add(new Option("南京","01"));
  ddlCity.options.add(new Option("苏州","02"));
  ddlCity.options.add(new Option("无锡","03"));
 }
  else if(ddlPro.value == "hn")
 {
  ddlCity.options.add(new Option("郑州","01"));
  ddlCity.options.add(new Option("洛阳","02"));
  ddlCity.options.add(new Option("开封","03"));
 }

}


</script>

 

页面上两个下拉列表:

<div>
        <select name="ddlPro" onchange="ddlChanged();">
        <option value="sd">山东</option>
        <option value="js">江苏</option>
        <option value="hn">河南</option>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <select name="ddlCity">
        <option value="01">菏泽</option>
        <option value="02">济南</option>
        <option value="03">青岛</option>
        </select>
        
       
</div>

 

2..net后台数据绑定

页面上放置两个下拉列表:

<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddl1_SelectedIndexChanged"> </asp:DropDownList>
      

<asp:DropDownList ID="ddl2" runat="server"> </asp:DropDownList>

后台代码:

//Page_Load事件

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {

            //绑定省份
            DataTable tPro = new DataTable();

            tPro.Columns.Add("id", System.Type.GetType("System.String"));
            tPro.Columns.Add("param", System.Type.GetType("System.String"));

            //添加三个省份
            DataRow dr = tPro.NewRow();
            dr["id"] = "sd";
            dr["param"] = "山东";
            tPro.Rows.Add(dr);

            dr = tPro.NewRow();
            dr["id"] = "js";
            dr["param"] = "江苏";
            tPro.Rows.Add(dr);

            dr = tPro.NewRow();
            dr["id"] = "hn";
            dr["param"] = "河南";
            tPro.Rows.Add(dr);

            this.ddl1.DataSource = tPro.DefaultView;
            this.ddl1.DataTextField = "param";
            this.ddl1.DataValueField = "id";
            this.ddl1.DataBind();

            //绑定城市
            DataTable tCity = new DataTable();

            tCity.Columns.Add("id", System.Type.GetType("System.String"));
            tCity.Columns.Add("param", System.Type.GetType("System.String"));

            //添加三个省份
            dr = tCity.NewRow();
            dr["id"] = "01";
            dr["param"] = "菏泽";
            tCity.Rows.Add(dr);

            dr = tCity.NewRow();
            dr["id"] = "02";
            dr["param"] = "济南";
            tCity.Rows.Add(dr);

            dr = tCity.NewRow();
            dr["id"] = "03";
            dr["param"] = "青岛";
            tCity.Rows.Add(dr);

            this.ddl2.DataSource = tCity.DefaultView;
            this.ddl2.DataTextField = "param";
            this.ddl2.DataValueField = "id";
            this.ddl2.DataBind();


        
        }
    }

//下拉列表1变换选项事件

    protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //移除城市下拉列表项
        this.ddl2.Items.C

用户评论
昵称 
内容  *
验证码   
   
相关文章 更多...  
Copyright © 2010 zdbase.com All Rights Reserved. 苏ICP备15039389号 可人软件设计