html select標籤二級關聯
阿新 • • 發佈：2019-01-26
Js版：
<!DOCTYPE html>
<html>
<head>
<script>
//1.建立一個二維陣列用於儲存省份和城市
var cities = new Array(3);
cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");
cities[1] = new Array("長沙市","郴州市","株洲市","岳陽市");
cities[2] = new jQuery版：
<script>
$(function(){
//2.建立二維陣列用於儲存省份和城市
var cities = new Array(3);
cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");
cities[1] = new Array("長沙市","郴州市","株洲市","岳陽市");
cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");
$("#province").change(function(){
//10.清除第二個下拉列表的內容
$("#city").empty();
//1.獲取使用者選擇的省份
var val = this.value;
//alert(val);
//3.遍歷二維陣列中的省份
$.each(cities,function(i,n){
//alert(i+":"+n);
//4.判斷使用者選擇的省份和遍歷的省份
if(val==i){
//5.遍歷該省份下的所有城市
$.each(cities[i], function(j,m) {
//alert(m);
//6.建立城市文字節點
var textNode = document.createTextNode(m);
//7.建立option元素節點
var opEle = document.createElement("option");
//8.將城市文字節點新增到option元素節點中去
$(opEle).append(textNode);
//9.將option元素節點追加到第二個下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
<select id="province">
<option>--請選擇--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>