window.onload = function () {
var datas = {
"吉林": ["長春", "四平", "松原"],
"山東": ["青島", "濟南", "煙臺"],
"山西": ["大同", "太原", "運城"]
};
var def = '吉林';
//加載省份
var s1 = document.getElementById('se1');
for (var key in datas) {
//創建option標籤
var opt1 = document.createElement('option');
opt1.innerHTML = key;
opt1.value = key;
opt1.selected = key == def ? true : false;
s1.appendChild(opt1);
}
//加載城市
var s2 = document.getElementById('se2');
for (var i = 0; i < datas[def].length; i++) {
var opt2 = document.createElement('option');
opt2.innerHTML = datas[def][i];
opt2.value = datas[def][i];
s2.appendChild(opt2);
}
//根據省份加載對應的城市
s1.onchange = function () {
//獲取當前選中的省份
//alert(this.value);
//清空城市 再加載城市
while (s2.firstChild) {
s2.removeChild(s2.firstChild);
}
for (var i = 0; i < datas[this.value].length; i++) {
var opt3 = document.createElement('option');
opt3.innerHTML = datas[this.value][i];
opt3.value = datas[this.value][i];
s2.appendChild(opt3);
}
};
};
<select id="se1">
</select>
<select id="se2">
</select>