20131222-Dom省市加载-第二十七天
[1]省市选择
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
//1.动态加载省份
var datas = {
"山东": ["青岛", "济南", "烟台"],
"山西": ["大同", "太原", "运城"],
"陕西": ["西安", "咸阳", "汉中"]
};
var defaultProvince = '山西';
loadProvince(datas, defaultProvince);
//2.根据默认选中的省份，动态加载城市信息
loadCity(datas, defaultProvince);
//2.为省份的select注册一个选择项改变事件，当选择项改变后动态改变"城市列表"
document.getElementById('s1').onchange = function () {
//1.获取当前选中项
//this.value指的就是，当前select中被选中的那个option的value值。
//alert(this.value);
//获取当前用户选中的省份
var currentProvince = this.value;
//根据省份信息加载城市
loadCity(datas, currentProvince);
};
};
//加载城市的方法
function loadCity(dict, dp) {
var s2Obj = document.getElementById('s2');
//重新加载之前清空一下s2
while (s2Obj.firstChild) {
s2Obj.removeChild(s2Obj.firstChild);
}
//根据默认选中省份，查找对应的城市信息
var city = dict[dp];
//将找到的城市数据加载到s2中
for (var i = 0; i < city.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = city[i];
opt.value = city[i];
s2Obj.appendChild(opt);
}
}
//加载省份的方法
function loadProvince(dict, dp) {
var s1Object = document.getElementById('s1');
//遍历dict数据
for (var key in dict) {
//每遍历一条数据，则向selelct增加一个option
var opt = document.createElement('option');
opt.innerHTML = key;
opt.value = key;
//如果当前遍历的省份与"默认要选中的省份"相同
if (key == dp) {
//设置默认被选中的option
opt.selected = true;
}
//var opt = new Option(key,key);
s1Object.appendChild(opt);
}
}
</script>
</head>
<body>
省：
<select id="s1">
</select>
市：
<select id="s2">
</select>
</body>
