方法一:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
var shengfen = [["邯郸", "仓州"], ["安阳", "洛阳"]];
//给省份选项改变的事件
$("#pro").change(function() {
//清空上次
$("#cityx").siblings().remove();
var sheng = $(this).val();//省份对应value
for(var i = 0; i < shengfen[sheng].length; i++) {
var $o = $("<option></option>");//创建option标签
$o.html(shengfen[sheng][i]);
$("#city").append($o);
}
});
});
</script>
</head>
<body>
<form>
<select id="pro">
<option>---请选择省份</option>
<option value="0">河北省</option>
<option value="1">河南省</option>
</select>
<select id="city">
<option id="cityx">---请选择城市</option>
</select>
</form>
</body>
</html>
方法二:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
var cities = [
["西二旗","西三旗","西四旗","西五旗","西六旗"],
["杭州市", "绍兴市", "温州市", "义乌市", "嘉兴市"],
["南京市", "苏州市", "扬州市", "无锡市"],
["武汉市", "襄阳市", "荆州市", "宜昌市", "恩施市"],
["石家庄市", "唐山市", "保定市", "邢台市", "廊坊市"],
["长春市", "吉林市", "四平市", "延边市"]
];
var $city = $("#city");
// 获得代表省份的下拉列表
$("#province").change(function() {
// alert(this.value);
// alert($(this).val());
// 清空第二个列表中的内容
$city.get(0).options.length = 0;
var val = this.value;
// 遍历并且判断
$.each(cities, function(i, n) {
// 判断
if(i == val) {
$(n).each(function(j, m) {
// alert(j + " " + m);
$city.append("<option>" + m + "</option>");
});
}
});
});
});
</script>
</head>
<body>
<select id="province" name="province">
<option value="0">北京</option>
<option value="1">浙江省</option>
<option value="2">江苏省</option>
<option value="3">湖北省</option>
<option value="4">河北省</option>
<option value="5">吉林省</option>
</select>
<select id="city" name="city">
<option>西二旗</option>
<option>西三旗</option>
<option>西四旗</option>
<option>西五旗</option>
<option>西六旗</option>
</select>
</body>
</html>