叁柒設計三七设计 Three seven design 我的学习与分享

详细信息

来自:关键字：

完美解决动态二级下拉菜单联动问题(javascript)

December 13th,2008 01:41:35 Category : Javascript

Click (2926)

静态版一

HTML代码

<script language="javascript" type="text/javascript">
var totalCount=12;  //定义数据总数，包括1级2级
//数据结构，是个数组的数组，可以使用开发语言动态产生
dataArray = new Array();
dataArray[0] = new Array("1100","1100","0");  //一级菜单表示为0
dataArray[1] = new Array("1200","1200","0");
dataArray[2] = new Array("1300","1300","0");
dataArray[3] = new Array("1111","0001","1100");
dataArray[4] = new Array("2222","0002","1100");
dataArray[5] = new Array("3333","0003","1100");
dataArray[6] = new Array("4444","4444","1200");
dataArray[7] = new Array("5555","5555","1200");
dataArray[8] = new Array("6666","6666","1200");
dataArray[9] = new Array("7777","7777","1200");
dataArray[10] = new Array("8888","8888","1300");
dataArray[11] = new Array("9999","9999","1300");
//一级菜单改变产生的动作
function select1Change(select1ID)
{
if(select1ID=='select1Text')  //如果是选中了一级菜单文字，则显示回二级菜单文字
{
alert("回到2级菜单显示");
document.myform.select2.length = 0;
document.myform.select2.options[0] = new Option("==请选二级分类==","select2Text" );
return false;
}
else  //其他情况则显示对应的2级菜单项
{
document.myform.select2.length = 0;
for (var i=0;i < totalCount; i++)
{
if (dataArray[i][2] == select1ID)
{
document.myform.select2.options[document.myform.select2.length]
= new Option(dataArray[i][0], dataArray[i][1]);
}
}
}
}
//二级菜单项目选中产生的动作，这里只是示意性的，没有实际意义
function select2Change(select2ID)
{
alert(select2ID);
}
</script>
<form method="POST" name="myform">
<p>
<select name="select1" onchange="select1Change(document.myform.select1.options[document.myform.select1.selectedIndex].value)">
<option selected value="select1Text">==请选一级分类==</option>
<option value="1100" id="1100">1100</option>
<option value="1200" id="1200">1200</option>
<option value="1300" id="1300">1300</option>
</select> 
<select name="select2" onchange="select2Change(document.myform.select2.options[document.myform.select2.selectedIndex].value)">
<option selected value="select2Text">==请选二级分类==</option>
</select> </p>
</form>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

静态版二

HTML代码

<script language="JavaScript">

</script>
<form name="profile" method="post">
<select id="province" size="1" name="province">
<option selected></option>
</select>
<select id="city" size="1" name="city">
<option selected></option>
</select>
<script language="javascript">
InitCitySelect(document.profile.province,document.profile.city);
</script>
<input type="submit">
</form>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

下一主题:IE与Firefox的CSS兼容大全

上一主题:Div+CSS无缝滚动终极版

[ 资讯评论 ]

暂时没有任何评论！

[ 提交评论 ]