jquery实现三级联动效果

最新推荐文章于 2024-07-26 03:31:50 发布

sunhongbo1988

最新推荐文章于 2024-07-26 03:31:50 发布

阅读量788

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/sunhongbo1988/article/details/72900373

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.Jsp主页面：

<%@ page language="java" pageEncoding="gbk"%>
<%
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>三级联动</title>
</head>
<script src="js/jquery.1.3.2.min.js"></script>
<script language="javascript">
function checkSg(){
var sg=$("#sheng").val();
var xn=$("#xian").val();

jQuery.ajax({
type:"post",
cache:false,
url:"Three2.jsp",
data:{sheng:sg},
dataType:"text",
success:function(response){
$('#shi').html(response);
},
error:function(xmlhttprequest,msg,errorobj){
alert(msg);
}
});
if(sg==""){
$("#xian").html("<option val=''>--请选择县--</option>");
}
}

function checkSi(){
var sg=$("#sheng").val();
var si=$("#shi").val();

jQuery.ajax({
type:"post",
cache:false,
url:"Three3.jsp",
data:{sheng:sg,shi:si},
dataType:"text",
success:function(response){
$('#xian').html(response);
},
error:function(xmlhttprequest,msg,errorobj){
alert(msg);
}
});
}

</script>

<body>
<div>
<form name="form1" method="post" action="Test3.jsp">
<table>
<tr id="ssx">
<td id="sg">省</td>
<td>
<select id="sheng" οnchange="checkSg()">
<option value="" selected="selected">--请选择省--</option>
<option id="ah" value="ah">安徽</option>
<option id="js" value="js">江苏</option>
<option id="zj" value="zj">浙江</option>
</select>
</td>
<td id="si">市</td>
<td>
<select id="shi" οnchange="checkSi()"/>
<option value="" selected="selected">--请选择市--</option>
</select>
</td>

<td id="xn">县</td>
<td>
<select id="xian">
<option value="" selected="selected">--请选择县--</option>
</select>
</td>
</tr>

<tr>
<td><input type="submit" value="提交" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>

2.后台交互页面1

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
request.setCharacterEncoding("utf-8");
String sheng=request.getParameter("sheng");
List list=new ArrayList();
if(sheng.equals("ah")){
list.add("合肥");
list.add("蚌埠");
list.add("宿州");
}else if(sheng.equals("zj")){
list.add("杭州");
list.add("桐乡");
list.add("海宁");
}else if(sheng.equals("js")){
list.add("盐城");
list.add("苏州");
list.add("无锡");
}
if(list.size()>=0){
out.print("<option val=''>--请选择市--</option>");
for(int i=0;i<list.size();i++){
out.print("<option value=\""+(i+1)+"\">"+list.get(i)+"</option>");
}
}else{
throw new RuntimeException("No data found.");
}

3.后台交互页面2：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
request.setCharacterEncoding("utf-8");
String sheng=request.getParameter("sheng");
String shi=request.getParameter("shi");
List list=new ArrayList();
if(sheng.equals("ah")&&shi.equals("1")){
list.add("包头");
list.add("蜀山");
list.add("高新");
}else if(sheng.equals("ah")&&shi.equals("2")){
list.add("五河");
list.add("固镇");
list.add("怀远");
}else if(sheng.equals("ah")&&shi.equals("3")){
list.add("泗县");
list.add("灵璧");
list.add("徐县");
}else if(sheng.equals("zj")&&shi.equals("1")){
list.add("滨江");
list.add("桐庐");
list.add("淳安");
}else if(sheng.equals("zj")&&shi.equals("2")){
list.add("留良");
list.add("石门");
list.add("大麻");
}else if(sheng.equals("zj")&&shi.equals("3")){
list.add("海宁新世纪幼儿园");
list.add("海宁街道办");
list.add("海宁中学");
}else if(sheng.equals("js")&&shi.equals("1")){
list.add("盐城中学");
list.add("盐城街道办");
list.add("盐城县");
}else if(sheng.equals("js")&&shi.equals("2")){
list.add("苏州市政府");
list.add("苏州幼儿园");
list.add("苏州街道办");
}else if(sheng.equals("js")&&shi.equals("3")){
list.add("无锡化工厂");
list.add("无锡达内机构");
list.add("无锡街道办");
}
if(list.size()>=0){
out.print("<option val=''>--请选择县--</option>");
for(int i=0;i<list.size();i++){
out.print("<option name=\"\" value=\""+(i+1)+"\">"+list.get(i)+"</option>");
}
}else{
throw new RuntimeException("No data found.");
}
%>