1.实现的效果
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function(){//入口函数
//获得城市对象的下拉框
var $city = $("#city");
// 利用二维数组来表示城市,注意对应关系
var cities = [
["达州市","成都市","宜宾市","自贡市","泸州市"],
["合肥市","淮南市","马鞍山市","六安市","亳州市"],
["南京市","苏州市","扬州市"],
["沧州市","泊头市","天津市"]
];
//获得省份的对象
$("#provence").change(function(){
$city.get(0).length = 1; //方式一:采用原生的方式把长度置为1;
var val = this.value;
$.each(cities, function(i,n) {
if (val == i ) {
$(n).each(function(j,m){
//创建对象,并且添加到城市下拉框中
$city.append("<option name='city'>"+m+"</option>")
});
}
});
});
});
</script>
</head>
<body>
省份:<select id="provence">
<option value="0" name="provence">四川省</option>
<option value="1" name="provence">安徽省</option>
<option value="2" name="provence">江苏省</option>
<option value="3" name="provence">河北省</option>
</select>
城市:<select id="city">
<option value="0" name="city">请选择</option>
</select>
</body>
</html>