二级联动菜单动态关联菜单 JS菜单联动省市代码二级菜单JS联动

bywzy 发表于程序设计分类，

22 一月 2008

这个二级菜单JS联动以前写程序时学习用的，一直保存在自己桌面上，今天清理文件是
想把它删了，所以就贴上来了。

HTML代码

<br />
<head><br />
<meta http-equiv="Content-Type" ontent="text/html; charset=gb2312" /></p>
<p><script language="javascript">
//下面函数是演示二，联动菜单的处理代码
function makeshi(x){
var form2=document.diqu.one.options.length;//这句解释同上
var diqul=new Array(form2)//新建一个数组，项数为第一个下拉列表的项数
for(i=0;i
<form2;i++)//循环第一个下拉列表的项数那么多次
diqul[i]=new Array();//子循环
//下面是给每个循环赋值
var shi=document.diqu.shi;//方便引用
diqul[0][0]=new Option("绵阳","绵阳");
diqul[0][1]=new Option("成都","成都");
diqul[0][2]=new Option("广元","广元");
diqul[1][0]=new Option("盐城","盐城");
diqul[1][1]=new Option("苏州","苏州");
diqul[1][2]=new Option("常州","常州");
diqul[2][0]=new Option("南宁","南宁");
diqul[2][1]=new Option("柳州","柳州");
diqul[2][2]=new Option("北海","北海");
diqul[3][0]=new Option("杭州","杭州");
diqul[3][1]=new Option("温州","温州");
diqul[3][2]=new Option("义乌","义乌");
for(m=shi.options.length-1;m>0;m--)
//这个要看清楚,因为要重新填充下拉列表的话必须先清除里面原有的项,清除和增加当然是有区别的了,所以用递减
shi.options[m]=null;//将该项设置为空,也就等于清除了
for(j=0;j<diqul[x].length;j++){//这个循环是填充下拉列表
shi.options[j]=new Option(diqul[x][j].text,diqul[x][j].value)
//注意上面这据,列表的当前项等于 新项(数组对象的x,j项的文本为文本，)
}
shi.options[0].selected=true;//设置被选中的初始值
}
</script><br />
</head><br />
<body></p>
<p>对于脚本来说，最复杂的表单元素对象就是select了，他是一个复合对象，包含OPTION对象数组的对象</p>
<p><strong>演示二：地区二级无刷新联动菜单</strong></p>
<form id="form2" name="diqu" method="post" action="">
<select name="one" size="1" onchange="makeshi(options.selectedIndex)"></p>
<option value="0">四川</option>
<option value="1">江苏</option>
<option value="2">广西</option>
<option value="3">浙江</option>
<p></select><br />
<select name="shi"></p>
<option value="绵阳">绵阳</option>
<option value="成都">成都</option>
<option value="德阳">德阳</option>
<option value="广元">广元</option>
<option value="南充">南充</option>
<p></select><br />
</form>
<p></body><br />
</html><br />

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

« 上一篇：爱，总是差那么一点点 html包含文件静态网页调用别的网页的代码 include包含：下一篇 »

一	二	三	四	五	六	日
« 一
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

人生译站　woblog静听心曲而不谈风情,涵容悲喜而不越雷池!