jquery实现三级联动效果
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.");
}
%>
jquery实现三级联动效果相关推荐
- jquery三级联动模糊查询_js相关:jQuery实现三级联动效果
js相关:jQuery实现三级联动效果 发布于 2020-7-21| 复制链接 摘记: 很久没写了,顺带复习,写了一个jQuery实现的三级联动,供大家参考,具体内容如下 ```xhtml .. 很久 ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/ 支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> & ...
- jQuery版三级联动案例
jQuery版三级联动案例 首先写一个JSON数据 [{"province": "吉林省","cities": [{"city&q ...
- Spring boot整合jpa Jquery实现三级联动
Spring boot 整合jpa JQuery 实现省,市,区, 三级联动效果 三级联动在很多项目都必不可少,尤其是在付款时,需要选取地址,为了更好的用户体验感,从而出现了三级联动. 实现三级联动的 ...
- jquery省市区ajax,jQuery省市区三级联动
jQuery省市区三级联动演示下载,本文将给大家介绍一款非常好用的省市区三级联动插件:cityselect.通过这款城市联动插件,省市区三级联动cityselect插件可以无刷新省市区联动效果. 查看 ...
- 简单的一个用javascript做的'省市区'三级联动效果
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition ...
- [Python] PyQt5+Pycharm 实现省、市、区/县三级联动效果
Pyhton版本3.6 联动效果由三个py文件组成:一个是ui界面.一个逻辑脚本和省.市.区/县的信息文件. 先放上省.市.区/县的信息文件. #!usr/bin/env python # -*-co ...
- js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
- php 把省市存入数据库,用JS做了个省市县三级联动效果可存入数据库的值老不对,有代码...
用JS做了个省市县三级联动效果可存入数据库的值老不对,有代码,在线等 现在的问题是这样的,当我选好地址后就提交他到数据库中去,可是现在怎么修改提交到数据库中的值都是前面的那些编码,就不是后面的文字.要 ...
最新文章
- 网络安全与机器学习(二):网络安全任务如何结合机器学习?
- socket select模型
- python if main_python中if __name__ == '__main__' :main(()
- 日常python常见问题
- DayDayUp:《P2P行业最高端的玩法》源于网友网络收集
- CentOS7 Change the Sources of yum(刚装完centos后一定要干的事)
- ZK的实际应用:MVVM –以编程方式更新视图
- 【LeetCode】7. Reverse Integer
- xcode java mac_mac 下常用命令(xcode常用命令,环境相关等)
- 微信开发 调用摄像机拍照(录像)功能
- Blender 插件开发 添加快捷键
- Google发布Chrome Web Store应用商店
- 在Windows下搭建WAMP环境
- Python一些常用的网站
- Word里无法输入中文
- 行为识别(CVPR2020南京大学腾讯) ~ TEA论文笔记 ~《TEA: Temporal Excitation and Aggregation for Action Recognition》
- 20款华丽的几何形状字体【免费下载】
- 中式风格装修,彰显东方迷人的魅力
- Spring Cloud入门系列(1)- Spring生态体系发展史+全系框架介绍
- 图灵机器人SDK接入指南