題目描述：
從第一個下拉框選擇省份，根據省份選擇不同在第二個下拉框中顯示不同城市，並選擇。
顯示效果：
實現代碼：
首先先寫出不加script的html頁面的代碼：就是寫出兩個select-option的標籤，然後我的設計是不選擇省份時第二個下拉框中沒有默認的內容，所以第二個下拉框select標籤下面沒有option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市級聯效果</title>
</head>
<body>
<select id="province" onchange="selectCitys()" style="width:100px">
<option>--選擇省份--</option>
</select>
<select id="city" style="width:100px">
</select>
</body>
</html>1、在script標籤裏面首先聲明並初始化一個全局變量，類型是數組，數組的索引是省份名稱，不是java代碼中通常的數字索引號，形式是：info["陝西省"]；然後給索引爲陝西省的添加它的城市作爲它的值。
p.s.
a、info["陝西省"]:說一下，數組其實也是一種對象，而對象其實就是一個鍵值對的集合，對象可以有屬性也可以有方法，對象的屬性和方法可以使用方括號或點號的方式訪問。（詳見：http://www.jb51.net/article/70208.htm）
b、DOM對象的add（）：語法是selectobject.add(option,before)，option：要添加選項元素。before：在選項數組的該元素之前增加新的元素。如果該參數是null，元素添加到選項數組的末尾。（DOM的相關方法可以查詢w3school）
2、然後給第一個select標籤下添加option標籤，把各個省份顯示在下拉列表中。具體實現思路是：遍歷info數組然後每遍歷一次new Option(text,value),把每次遍歷到的info數組索引放進去。就可以了。
p.s.
a、getElementById（）：這一句是能夠使下面的操作指到省份下拉列表的select標籤，就是通過select的id值，調用getElementById()方法（這個方法是document對象的方法，document對象是window對象的子對象之一也是比較重要並且常用的對象,關於window和document可以參考：http://blog.csdn.net/byrantch/article/details/51593019），得到id值指定的對象。
b、window.onload=function fun（）:當網頁加載完畢後調用fun()函數，就是加載完畢html的文本,在這是指兩個select標籤，調用fun()函數，避免先加載函數的話找不到select的id值（網頁中的javaScript腳本代碼往往需要在文檔加載完成後才能夠去執行，否則可能導致無法獲取對象的情況）
3、城市下拉列表的實現，大致思路是：先獲得省份下拉列表的選擇值，之後遍歷info數組去匹配它的索引，匹配到之後，遍歷info["四川省"]的值數組，然後每遍歷一個城市new Option（text,value）添加一個option標籤
然後第二步加入script標籤的代碼後：一般沒有使用window.onload的script標籤放在代碼的最後來加載
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市級聯效果</title>
<script type="text/javascript">
var info=[];
info["陝西省"]=["西安市","咸陽市","寶雞市","延安市"];
info["廣東省"]=["廣州市","深圳市","珠海市","東莞市"];
info["江蘇省"]=["南京市","蘇州市","揚州市"];
function allProvince(){
var proSelect=document.getElementById("province");
for(var pro in info){
proSelect.add(new Option(pro,pro),null);
}
}
function selectCitys(){
var proValue=document.getElementById("province").value;
var citySelect=document.getElementById("city");
citySelect.length=0;
for(var pro in info){
if(pro==proValue){
for(var key in info[pro]){
citySelect.add(new Option(info[pro][key],info[pro][key]),null);
}
}
}
}
window.onload=allProvince;
</script>
</head>
<body>
<select id="province" onchange="selectCitys()" style="width:100px">
<option>--選擇省份--</option>
</select>
<select id="city" style="width:100px">
</select>
</body>
</html>