<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq_Demo1</title>
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
</head>
<body>
<select id="province">
<option value="-1">请选择</option>
</select> <select id="city">
<option value="-1">请选择</option>
</select>
</body>
<script type="text/javascript">
$(function(){
var pro=["广东","广西","福建"];
var ci=[["广州","深圳","珠海"],["南宁","玉林","桂林"],["莆田","福州","厦门"]]; //将数组中省份假入到选择项中去
$(pro).each(function(i,v){
$("#province").append("<option value='"+i+"'>"+v+"</option>");
}); $("#province").change(function(){
//每次选择省份之后都还原
$("#city").html("<option value='-1'>请选择</option>")
//获取省份的索引值
var proIndex=this.value;
// alert(proIndex);
//根据索引值遍历城市
$(ci[proIndex]).each(function(i,v){
$("#city").append("<option value='+i+'>"+v+"</option>");
});
});
});
</script>
</html>
执行结果：
2、使用已经编好的js，代码直接调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq_Demo2</title>
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<script type="text/javascript" src="js/jquery.provincesCity.js" ></script>
<script type="text/javascript" src="js/provincesdata.js" ></script>
</head>
<body>
<div id="province"> </div>
</body>
<script type="text/javascript">
$("#province").ProvinceCity();
</script>
</html>
执行结果：