首页 > 代码库 > 20131222-Dom省市加载-第二十七天

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中被选中的那个optionvalue值。

//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 = http://www.mamicode.com/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 = http://www.mamicode.com/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>

20131222-Dom省市加载-第二十七天