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

jquery 实现省市二级联动

2012-02-27 20:30 429 查看
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'example1.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

<link rel="stylesheet" type="text/css" href="styles.css">

-->

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

<script type="text/javascript">

$(document).ready(function(){

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

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

if($(this).attr("selected"))//如果被选中

{

//隐藏city

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

//选取下表为i的city，然后显示出来

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

}

});

});

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

});

</script>

</head>

<body>

<select id="province">

<option>---请选择省份---</option>

<option>北京</option>

<option>河北</option>

<option>山东</option>

</select>

<select class="city">

<option>东城</option>

<option>西城</option>

<option>海淀</option>

</select>

<select class="city">

<option>廊坊</option>

<option>保定</option>

<option>石家庄</option>

</select>

<select class="city">

<option>济南</option>

<option>烟台</option>

<option>青岛</option>

</select>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航