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>