<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>關聯</title>
</head>
<body>
省:
<select id="province"
οnchange="change();">
<option value="">請選擇</option>
<option value="0">浙江省</option>
<option value="1">河北省</option>
<option value="2">江蘇省</option>
</select>
市:
<select id="city">
<option>請選擇</option>
</select>
<script>
//加載城市資料(模拟)
function load_city() {
return [
["杭州","甯波","溫州"],
["保定","廊坊","唐山"],
["南京","無錫","蘇州"]
];
}
//自動加載
var cities = load_city();
//重置城市
function change() {
//1.擷取省份序号(value值)
var s1 =
document.getElementById("province");
var index = s1.value;
//2.擷取該省份對應的城市
var pcities = cities[index];
//3.删除城市下拉選内原有的城市option
var s2 =
document.getElementById("city");
//var options = s2.children;
//注意：從後往前删
//for(var i=options.length-1;i;i--) {
// options[i].remove();
//}
s2.innerHTML =
"<option>請選擇</option>";
//4.将擷取到的城市添加到此下拉選内
if(pcities) {
for(var i=0;i<pcities.length;i++) {
var opt =
document.createElement("option");
opt.innerHTML = pcities[i];
s2.appendChild(opt);
}
}
}
</script>
</body>
</html>
![Java String.format方法的簡單使用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)