<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq版省市联动</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<select id="province">
<option>==请选择==</option>
</select>
<select id="city">
<option>==请选择==</option>
</select>
</body>
<script>
var pro = ["新疆", "北京", "上海"];
var city = [["乌鲁木齐", "吐鲁番", "克拉玛依", "石河子"], ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区"], ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "闵行区", "宝山区"]];
$(function(){
$.each(pro, function(i){
$("#province").append("<option value="+ i + ">" + pro[i] + "</option>");
});
$("#province").change(function () {
var citylist = city[this.value];
//清空前一次的内容
$("#city").empty();
$.each(citylist, function (j) {
$("#city").append("<option>" + citylist[j] + "</option>");
});
});
});
</script>
</html>