js 省份城市二級動態聯動的例子
阿新 • • 發佈：2017-12-13
== func select ntb 標簽 直接 doctype pre 原來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province" onchange="func1(this)"></select>
<select id="city"></select>
<script>
data={"安徽":["馬鞍山","合肥","蕪湖","銅陵","蚌埠"],"江蘇":["南京","蘇州","無錫","常州","南通"],"山東":["濟南","青島","即墨","蓬萊","泰州"]};
var pro=document.getElementById("province"); //找到省份的標簽對象
var cit=document.getElementById("city"); //找到城市的標簽對象
for (var k in data){ //遍歷data數據 k是鍵 省份名
var opt=document.createElement("option"); //創建option的標簽
pro.appendChild(opt); //添加創建的option標簽到省份裏
opt.innerHTML=k; // 把k的鍵的文本 添加到標簽內
}
function func1(ev) {
cit.options.length=0; //這裏使用了技巧 用options.length=0清空了每次點擊後添加的option
for(var i in data[ev.value] ){ // this.value是原來省份裏的鍵值
var op=document.createElement("option"); //創建option的標簽
cit.appendChild(op); //添加創建的option
op.innerHTML=data[ev.value][i]; // 註意: i不是鍵內數據的內容 是索引 不能直接=i
}
}
</script>
</body>
</html>
================== 註:這裏並沒有直接在HTML裏寫死靜態代碼,因為如果數據的添加和修改會很麻煩,用JS語句控制只需要修改DATA數據即可==========================
PS: 學習的過程是一點一滴的積累,不是聰明就能成功!
js 省份城市二級動態聯動的例子