Index

实现三级联动效果的JS代码

作者:admin 日期:2008-02-21

字体大小: 小 中 大
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实现三级联动效果的JS代码_www.e-dragon.com.cn</title>
</head>

<body>

<form name="form1" method="post">
<select id="coun1" name="coun1"></select><select id="prov2" name="prov2"></select><select id="city3" name="city3"></select><select id="town4" name="town4"></select>
</form>
<script language="JavaScript">
<!--
function LianDong(arr, sel)
{
var me = this;
this. = function(o)
{
return document.getElementById(o);
}

this.sub = function (i, pid) //根据pid修改下级表单,pid为表单下拉所选的内容条目;而i为该表单的sel数组下标
{
for (var j=i+1; j<sel.length; j++)
{
me.(sel[j]).length = 0;
me.(sel[j]).options[0] = new Option("请选择", "");
}
for ( var j = 0; j < arr.length; j++) //此句是遍历了所有的arr数组值,有待再优化处理
{
if (arr[j][1] == pid) //只有数组arr[j][1]的值与所选内容条目相同才增加条目(是对下一级做修改和增加)
{
me.(sel[i+1]).options[me.(sel[i+1]).length] = new Option(arr[j][2], arr[j][0]); //增加新的条目
}
}
}

this.init = function()
{
me.sub(-1,"root"); //获得conn1的值
for (var i=0; i<sel.length-1; i++)
{
me.(sel[i]).onchange = function()
{
var i;
for (i=0; me.(sel[i])!=this; i++); //此句将i值定位到当前正改变的下拉表单的数组下标
me.sub(i, me.(sel[i]).value); //某个表单sel[i]改变值时调用sub,来重新分布下级相关各表单的值
}
}
}

this.init();
}

//只要将上面的数组按照你的要求创建好,就可以实现你想要的无限下拉联动效果了

var array=new Array();
//一级下拉表单条目所对应数组值
array[0]=new Array("中国","root","中国");
array[1]=new Array("中国香港","root","中国香港");
array[2]=new Array("中国澳门","root","中国澳门");
array[3]=new Array("中国台湾","root","中国台湾");

//二级下拉表单条目所对应数组值
array[4]=new Array("北京","中国","北京");
array[5]=new Array("上海","中国","上海");
array[6]=new Array("湖南","中国","湖南");
array[7]=new Array("湖北","中国","湖北");
array[8]=new Array("广东","中国","广东");
array[38]=new Array("中国香港分区1","中国香港","中国香港分区1");
array[39]=new Array("中国香港分区2","中国香港","中国香港分区2");

//三级下拉表单条目所对应数组值
array[9]=new Array("东城区","北京","东城区");
array[10]=new Array("海淀区","北京","海淀区");
array[11]=new Array("朝阳区","北京","朝阳区");
array[12]=new Array("黄埔区","上海","黄埔区");
array[13]=new Array("其它分区","上海","其它分区");
array[14]=new Array("长沙","湖南","长沙");
array[15]=new Array("永州","湖南","永州");
array[16]=new Array("武汉","湖北","武汉");
array[17]=new Array("其它市","湖北","其它市");
array[18]=new Array("广州","广东","广州");
array[19]=new Array("佛山","广东","佛山");
array[20]=new Array("中山","广东","中山");
array[21]=new Array("东莞","广东","东莞");
array[22]=new Array("深圳","广东","深圳");
array[23]=new Array("其它等等","广东","其它等等");

//四级下拉表单条目所对应数组值
array[24]=new Array("东城区下属A","东城区","东城区下属A");
array[25]=new Array("东城区下属B","东城区","东城区下属B");
array[26]=new Array("东城区下属C","东城区","东城区下属C");
array[27]=new Array("海淀区下级地A","海淀区","海淀区下级地A");
array[28]=new Array("朝阳区11","朝阳区","朝阳区11");
array[29]=new Array("黄埔区111","黄埔区","黄埔区111");
array[30]=new Array("上海其它分区","其它分区","上海其它分区");
array[31]=new Array("其它分区AAA","其它分区","其它分区AAA");
array[32]=new Array("花都","广州","花都");
array[33]=new Array("荔湾","广州","荔湾");
array[34]=new Array("海珠","广州","海珠");
array[35]=new Array("番禺","广州","番禺");
array[36]=new Array("深圳A","深圳","深圳A");
array[37]=new Array("深圳B","深圳","深圳B");
array[40]=new Array("武昌","武汉","武昌");
array[41]=new Array("汉口","武汉","汉口");
//只要将上面的数组按照你的要求创建好,就可以实现你想要的无限下拉联动效果了

var select = new Array("coun1","prov2","city3","town4");

var liandong=new LianDong(array, select)
-->
</script>

</body>
</html> 



文章来自: 本站原创
引用通告地址: http://www.is21.cn/trackback.asp?tbID=172
Tags:
评论: 0 | 引用: 0 | 查看次数: 1377
发表评论
你没有权限发表留言！