您的位置：首页 > Web前端 > JavaScript

用javascript实现三级联动

2014-05-05 15:18 351 查看

<html>

<head>

<title>三级联动下拉</title>

<script>

//根据选中省iD获取对应市

function getPro(province)

{

var provinceID=null;

for(var i=0;i<province.length;i++)

{

if(province.options[i].selected)

{

provinceID=province.options[i].value;

break;

}

}

if(provinceID!=null)

{

var city = document.forms[0].elements("selCity");

var zone = document.forms[0].elements("selZone");

clearSel(city);

clearSel(zone);

if(provinceID=="1")

{

var wuhan = createSel("10","武汉市");

var huangshi = createSel("11","黄石市");

city.add(wuhan);

city.add(huangshi);

}

else if(provinceID=="2")

{

var chengdu = createSel("21","成都");

var zhigong= createSel("22","自贡");

city.add(chengdu);

city.add(zhigong);

}

}

}

//根据选中市获取对应区

function getCity(selcity)

{

var cityID=null;

for(var i=0;i<selcity.length;i++)

{

if(selcity.options[i].selected)

{

cityID=selcity.options[i].value;

break;

}

}

if(cityID!=null)

{

var zone = document.forms[0].elements("selZone");

clearSel(zone);

if(cityID=="10")

{

var wuchang=createSel("101","武昌");

var hanyang=createSel("102","汉阳");

var hankou = createSel("103","汉口");

zone.add(wuchang);

zone.add(hanyang);

zong.add(hankou);

}

else if(cityID=="11")

{

var xisai = createSel("201","西赛山");

var huangshishi = createSel("202","黄石市内");

zone.add(xisai);

zone.add(huangshishi);

}

else if(cityID=="21")

{

var wuhou=createSel("210","武侯区");

var jijiang=createSel("211","锦江区");

zone.add(wuhou);

zone.add(jijiang);

}

else if(cityID=="22")

{

var one = createSel("221","自贡城市一");

var two= createSel("222","自贡城市二");

zone.add(one);

zone.add(two);

}

}

}

//创建option

function createSel(value,text)

{

var optn = document.createElement("option");

optn.value=value;

optn.text= text;

return optn;

}

//清空sel下拉

function clearSel(sel)

{

if(sel != null)

{

while(sel.length >0)

{

sel.removeChild(sel.options[sel.length-1]);

}

}

}

</script>

</head>

<body>

<form name="form1">

<center>

<select name="selPro" onchange="getPro(this)">

<option value="0">--请选择--</option>

<option value="1">湖北省</option>

<option value="2">四川省</option>

</select>

<br/><br/><br/><br/>

<select name="selCity" onChange="getCity(this)">

<option>--请选择--</option>

</select>

<br/><br/><br/><br/>

<select name="selZone">

</select>

</center>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航