這篇文章主要介紹了使用二維數(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>
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：