三级联动下拉框

最新推荐文章于 2023-07-11 18:23:11 发布

programpoet

最新推荐文章于 2023-07-11 18:23:11 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： function javascript border 数据库 table html

本文链接：https://blog.csdn.net/programpoet/article/details/1629434

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
<head>
<script   language=javascript>
var   arr="浙江|江苏|安徽|江西";

var   arr0   =   "杭州|宁波|温州|绍兴";   //这些数据可以从数据库中取得
var   arr1   =   "南京|苏州|无锡|常州";
var   arr2   =   "合肥|翕县|黄山|祁门";
var   arr3   =   "南昌|九江|赣州|上饶";

var   arr00   =   "杭州A区|杭州B区";
var   arr01   =   "宁波A区|宁波B区";
var   arr02   =   "温州A区|温州B区";
var   arr03   =   "绍兴A区|绍兴B区";

var   arr10   =   "南京A区|南京B区";
var   arr11   =   "苏州A区|苏州B区";
var   arr12   =   "无锡A区|无锡B区";
var   arr13   =   "常州A区|常州B区";

var   arr20   =   "合肥A区|合肥B区";
var   arr21   =   "翕县A区|翕县B区";
var   arr22   =   "黄山A区|黄山B区";
var   arr23   =   "祁门A区|祁门B区";

var   arr30   =   "南昌A区|南昌B区";
var   arr31   =   "九江A区|九江B区";
var   arr32   =   "赣州A区|赣州B区";
var   arr33   =   "上饶A区|上饶B区";

//alert(eval("arr"+2+1));
function   AddOptions(dltObj,arrObj)
{
dltObj.innerHTML="";
var   arrLocation=arrObj.split("|");
for(var   i=0;i<arrLocation.length;i++){
var   opt=document.createElement("OPTION");
dltObj.add(opt);
opt.value=i;
opt.text=arrLocation[i];
}
}
function   init(){
AddOptions(dltProvince,eval('arr'));
AddOptions(dltCity,eval('arr'+dltProvince.selectedIndex));
AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));
}
</script>
</head>
<body   onLoad="init();">
<table   width="300"   cellpading="0"   cellspacing="0"   border="0">
<tr>
<td   width="100"><select   id="dltProvince"   οnchange="AddOptions(dltCity,eval('arr'+dltProvince.selectedIndex));AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));"   style="width:100%"></select>
</td>
<td   width="100"><select   id="dltCity"   οnchange="AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));"   style="width:100%"></select>
</td>
<td   width="100"><select   id="dltArea"   style="width:100%"></select>
</td>
</tr>
</table>
</body>
</html>