说明:
联动菜单的原理:第二个下拉列表根据第一个下拉列表内容重新绑定数据,这里介绍两种联动菜单,一个是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>
<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