<!--
需求:
[1] 动态生成省份选择框。
[2] 当选择了省份的某一项时, 动态改变
城市选择中的列表项。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script src="../JS/jquery-1.8.3.min.js"></script>
<script>
var pros = ['请选择省份','广东省','湖南省','四川省'];
var cities = [
[],
['广州','汕头','珠海','茂名','东莞','惠州'],
['株洲', '长沙', '衡阳', '常德'],
['成都', '达州', '锦阳', '南充']
];
$( init );
function init(){
//{ps} 初始化省份的数据
makeOptions( pros, $("#province") );
}
//{ps} 实现代码的复用
//功能: 产生某个下拉列表的中的数据项。
//返回: 没有返回值.
// arr: 这是一个数组 ==> 所有省份 / 某一个省份的所有城市
// $select: 一个下拉列表的 Jquery 对象
function makeOptions( arr, $select ){
for (var i = 0; i < arr.length; i++){
//创建下拉列表
var option = document.createElement("option");
//把省份添加进去
option.innerText = arr[i];
//设置值，方便之后确定选择的是哪一个
$(option).val(i);
//把option添加进select中
$select.append($(option));
}
}
//{ps} 当省份的值发生改变, 触发以下的函数
function updateCity(){
//把内容清零，不然会一直拼接
//city.options.length = 0;
$("#city option").remove();
makeOptions(cities[$("#province option:selected").val()],$("#city"));
/* for (var i = 0; i < cities.length; i++){
if ($("#province option:selected").val() == i){
for (var j = 0; j < cities[i].length; j++){
var option = document.createElement("option");
$(option).text(cities[i][j]);
$("#city").append($(option));
}
}
}*/
}
</script>
</head>
<body>
<select id="province" onchange="updateCity();"></select>
<select id="city"></select>
</body>
</html>
