jquery实现简单城市联动

来源:互联网 发布:养女方知世道险 编辑:程序博客网 时间:2024/05/16 06:01
var fj = new Array("福州市","厦门市","泉州市");
var gd = new Array("广东市","深圳市","虎门市");
var tw = new Array("台北市","台中市","台南市");
var fz = new Array("平潭县","鼓山区","大学园");
var xm = new Array("集美区","思明区","湖里区");
var qz = new Array("安息县","南安市","石狮市");
$("#province").change(function(){
$("#city option:gt(0)").remove();
var province = $(this).val();
switch(province){
case "福建省":
for (var i = 0; i < fj.length; i++) {
$("#city").append("<option value='"+fj[i]+"'>--"+fj[i]+"--</option>");
}
break;
case "广东省":
for (var i = 0; i < gd.length; i++) {
$("#city").append("<option value='"+gd[i]+"'>--"+gd[i]+"--</option>");
}
break;
case "台湾省":
for (var i = 0; i < tw.length; i++) {
$("#city").append("<option value='"+tw[i]+"'>--"+tw[i]+"--</option>");
}
break;
}
});
$("#city").change(function(){
$("#town option:gt(0)").remove();
var city = $(this).val();
switch(city){
case "福州市":
for (var i = 0; i < fz.length; i++) {
$("#town").append("<option value='"+fz[i]+"'>--"+fz[i]+"--</option>");
}
break;
case "厦门市":
for (var i = 0; i < xm.length; i++) {
$("#town").append("<option value='"+xm[i]+"'>--"+xm[i]+"--</option>");
}
break;
case "泉州市":
for (var i = 0; i < qz.length; i++) {
$("#town").append("<option value='"+qz[i]+"'>--"+qz[i]+"--</option>");
}
break;
}

});



<select name="province" id="province">
<option value="">--请选择--</option>
<option value="福建省">--福建省--</option>
<option value="广东省">--广东省--</option>
<option value="台湾省">--台湾省--</option>
</select>
<select name="city" id="city">
<option value="">--请选择--</option>
</select>
<select name="town" id="town">
<option value="">--请选择--</option>
</select>

0 0
原创粉丝点击