快捷導(dǎo)航

JavaScript二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單

更新時(shí)間：2014年05月08日 09:32:59 作者：

這篇文章主要介紹了使用二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單，通過(guò)二維數(shù)組存儲(chǔ)城市列表項(xiàng),需要的朋友可以參考下

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript"> 
//初始化一個(gè)二維數(shù)組存儲(chǔ)城市列表項(xiàng) 
var cities=[ 
["安慶","合肥","桐城"], 
["石家莊","保定","唐山"], 
["鄭州","洛陽(yáng)","開(kāi)封"] 
]; 
//選中某個(gè)省份時(shí)候，調(diào)用添加城市的方法 
function provinceChanged(sel){ 
//alert("select的長(zhǎng)度"+sel.options.length); 
//sel其實(shí)就是select對(duì)象 
//遍歷options集合，查找選中的選項(xiàng) 
for(var x=0;x<sel.options.length;x++) 
{ 
var opt=sel.options[x]; 
if(opt.selected) 
{ 
//給被選擇的城市的select 添加option 
addCityToSelect(x) 
} 
} 
} 
//添加選中省份下的城市項(xiàng)到city的select中 
function addCityToSelect(x){ 
//從二維數(shù)組中找出對(duì)應(yīng)的城市 
var city=cities[x-1]; 
var citySelect=document.getElementById("select_city"); 
/*==================刪除節(jié)點(diǎn)中已經(jīng)存在的元素=============== 
在第二次或第n次調(diào)用方法的時(shí)候城市select對(duì)象中已經(jīng)添加了之前添加的節(jié)點(diǎn)，所以有清空。 
思路1：select對(duì)象的removeChild(),所以通過(guò)循環(huán)遍歷可以刪除字節(jié)點(diǎn)。 
思路2：直接設(shè)置select.options.length=1可以實(shí)現(xiàn)相同效果。 
*/ 
//設(shè)置城市的select對(duì)象下的options長(zhǎng)度為1 
citySelect.options.length=1; 
//設(shè)置options集合的長(zhǎng)度，刪除 
//citySelect.options.length=1; 
for(var x=0;x<city.length;x++) 
{ 
//創(chuàng)建元素節(jié)點(diǎn)對(duì)象 
var optionName=document.createElement("option"); 
//給option設(shè)置顯示內(nèi)容 
optionName.innerHTML=city[x]; 
//將創(chuàng)建的option添加到select 
citySelect.appendChild(optionName); 
/* 
在這個(gè)地方將某一個(gè)省份下面的所有城市添加到citySelect對(duì)象下面以后 
當(dāng)?shù)诙芜x擇第二個(gè)省份的時(shí)候，第二個(gè)省份的下面的所有城市有會(huì)被追加到 
citySelect節(jié)點(diǎn)下面。這樣的效果就錯(cuò)了。所以要求在每次添加之前，要 
對(duì)citySelect節(jié)點(diǎn)下面的內(nèi)容進(jìn)行清空。接著看： 
==================刪除節(jié)點(diǎn)中已經(jīng)存在的元素=============== 
*/ 
} 
} 
</script> 
</head> 
<body> 
<select onchange="provinceChanged(this);"> 
<!--this的含義：是指select對(duì)象調(diào)用provinceChanged(this),并且在此方法中 
把對(duì)象本身作為參數(shù)傳遞，以便對(duì)其進(jìn)行操作。 --> 
<option>請(qǐng)選擇省份</option> 
<option>安徽</option> 
<option>河北</option> 
<option>河南</option> 
</select> 
<select id="select_city"> 
<option>請(qǐng)選擇城市</option> 
</select> 
</body> 
</html> 