您的位置：首页 > Web前端 > JQuery

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

2017-07-22 19:58 477 查看
<!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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 二级联动
相关文章推荐
新的分享
章节导航