用javascript製作的一個簡單三級連動,非常簡單實用
省:
市:
區:
<script><br />
//聲明省<br />
var pres = ["北京", "上海", "山東"]; //直接聲明Array<br />
//聲明城市<br />
var cities = [<br />
["東城", "昌平", "海淀"],<br />
["浦東", "高區"],<br />
["濟南", "青島"]<br />
];<br />
var areas = [<br />
[<br />
["東城1", "東城2", "東城3"],<br />
["昌平1", "昌平2", "昌平3"],<br />
["海淀1", "海淀2", "海淀3"]<br />
],<br />
[<br />
["浦東1", "浦東2", "浦東3"],<br />
["高區1", "高區2", "高區3"]<br />
],<br />
[<br />
["濟南1", "濟南2"],<br />
["青島1", "青島2"]<br />
]<br />
]<br />
//設定一個省份的公共下標<br />
var pIndex = -1;<br />
var preEle = document.getElementById("pre");<br />
var cityEle = document.getElementById("city");<br />
var areaEle = document.getElementById("area");<br />
//先設定省份的值<br />
for (var i = 0; i < pres.length; i ) {<br />
//宣告option.<option value="pres[i]">Pres[i]<br />
var op = new Option(pres[i], i);<br />
//新增<br />
preEle.options.add(op);<br />
}<br />
function chg(obj) {<br /> if (obj.value == -1) {<br />
cityEle.options.length = 0;<br />
areaEle.options.length = 0;<br />
}<br />
//取得值<br />
var val = obj.value;<br />
pIndex = obj.value;<br />
//取得ctiry<br />
var cs = cities[val];<br />
//取得預設區域<br />
var as = areas[val][0];<br />
//先清空城市<br />
cityEle.options.length = 0;<br />
areaEle.options.length = 0;<br />
for (var i = 0; i < cs.length; i ) {<br />
var op = new Option(cs[i], i);<br />
cityEle.options.add(op);<br />
}<br />
for (var i = 0; i < as.length; i ) {<br />
var op = new Option(as[i], i);<br />
areaEle.options.add(op);<br />
}<br />
}<br />
function chg2(obj) {<br />
var val = obj.selectedIndex;<br />
var as = areas[pIndex][val];<br />
areaEle.options.length = 0;<br />
for (var i = 0; i < as.length; i ) {<br />
var op = new Option(as[i], i);<br />
areaEle.options.add(op);<br />
}<br />
}<br />
</script>
以上所述就是本文的全部內容了,希望大家能夠喜歡。