JQuery实现的简单城市间二级联动

来源:互联网 发布:误会 知乎 编辑:程序博客网 时间:2024/05/17 01:30


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>jQuery 二级联动</title>


<script type="text/javascript" src="jquery-1.5.2.min.js"></script>


<script type="text/javascript">
var currentShowCity = 0;


$(document).ready(function() {


$("#province").change(function() {


$("#province option").each(function(i, o) {


if($(this).attr("selected"))


{


$(".city").hide();


$(".city").eq(i).show();


currentShowCity = i;


}


});


});


$("#province").change();


});


function getSelectValue() {


alert("1级=" + $("#province").val());


$(".city").each(function(i, o) {


if(i == currentShowCity) {


alert("2级=" + $(".city").eq(i).val());


}


});


}
</script>


</head>


<body>


<select id="province">
<option>山东省</option>


<option>北京市</option>


<option>上海市</option>


<option>江苏省</option>


</select>


<select class="city">



<option>青岛市</option>


<option>淄博市</option>


<option>济南市</option>


<option>德州市</option>


<option>菏泽市</option>


</select>
<select class="city">


<option>青岛市</option>


<option>淄博市</option>


<option>济南市</option>


<option>德州市</option>


<option>菏泽市</option>


</select>
<select class="city">


<option>东城区</option>


<option>西城去</option>


<option>崇文区</option>


<option>宣武区</option>


<option>朝阳区</option>


</select>


<select class="city">


<option>黄浦区</option>


<option>卢湾区</option>


<option>徐汇区</option>


<option>长宁区</option>


<option>静安区</option>


</select>


<select class="city">


<option>南京市</option>


<option>镇江市</option>


<option>苏州</option>


<option>南通市</option>


<option>扬州市</option>


</select>




</script>


</body>


</html>

需要注意的是要引入 jquery-1.5.2.min.js


原创粉丝点击