<%@ 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 'xialakuang.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<style type="text/css">
.one{
　　float:left;
}
.two{
　　float:left;
　　width:200px;
　　height:100px;
　　border:1px red dashed;
　　margin-left:10px;
　　color:green;
}
</style>
<script type="text/javascript">
　　$(function(){
　　function lyz(e){    //下拉列表初始化
　　　　$(e).html("<option>请选择</option>");
}
var data = {
　　山东:{济南:"槐荫区,长清区,高新区,天桥区",烟台:"莱山区,福山区,芝罘区"},
　　河北:{衡水:"枣强县,新河县",石家庄:"鹿泉区,栾城区"},
　　河南:{郑州:"温县,新密市",许昌:"扶沟县,太康县"}
　　};
　　//遍历数据增加省份项
　　$.each(data,function(a){
　　　　$(".sheng").append("<option>"+a+"</option>");
　　});
　　//alert("aaa");

　　//省份列表框改变事件
　　$(".sheng").change(function(){
　　　　lyz(".cheng");    //城市的下拉框初始化
　　　　lyz(".xian");      //县级的下拉框初始化

　　// index value
　　$.each(data,function(a,b){

　　if($(".sheng option:selected").text() == a){ //如果省份选中项与数据匹配
　　//alert(a);
　　$.each(b,function(c,d){ //遍历数组
　　　　$(".cheng").append("<option>"+c+"</option>"); //增加城市项
　　});
　　//城市列表项改变事项
　　$(".cheng").change(function(){
　　　　lyz(".xian");

　　$.each(b,function(c,d){ //遍历数据
　　if($(".cheng option:selected").text() == c){ //如果城市选中项与数据匹配
　　　　//alert(c);
　　　　$.each(d.split(","),function(){     //遍历数组增加型号项， split()方法用于把一个字符串分割成字符串数组
　　　　　　$(".xian").append("<option>"+this+"</option>");
　　　　});
　　　　}
　　　　});
　　　　});
　　　　}
　　　　});
});
$(".one").click(function(){
　　var aa="您选择的省份：";
　　aa += $(".sheng option:selected").text()+"<br/>";
　　aa += "您选择的城市是：";
　　aa += $(".cheng option:selected").text()+"<br/>";
　　aa += "您选择的县区是：";
　　aa += $(".xian option:selected").text()+"<br/>";
　　$(".two").append(aa);
});

});
</script>
</head>

<body>
省份：<select class="sheng"><option>请选择</option></select>
城市：<select class="cheng"><option>请选择</option></select>
县级：<select class="xian"><option>请选择</option></select><br/><br/>
<button class="one">输出</button>
<div class="two"></div>
</body>
</html>

jQuery：下拉列表的联动的更多相关文章

  1. jQuery下拉列表二级联动插件

    jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...

  2. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  3. Select-or-Die：灵活的 jQuery 下拉列表插件

    Select-or-Die 是一个 jQuery 插件,用来自定义下拉列表(Select)元素.原生的下拉选择元素在各个浏览器的默认样式差异很多,而且自定义样式很困难,因此 Web 开发人员喜欢使用插 ...

  4. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  5. jquery省市区三级联动

    jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...

  6. jQuery插件——多级联动菜单

    jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...

  7. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  8. jQuery实现省市联动

    未实现任何功能之前: 实现功能之后: 实现该功能的jQuery核心代码: <script> var provinceArr=new Array(5); provinceArr[0]=new ...

  9. jQuery写省级联动列表，创造二维数组，以及如何存/调用二维数组中的数据

    jQuery写省级联动列表,创造二维数组来存放数据,然后通过each来遍历调用,通过creatTxtNode创建文本节点,通过createElement创建标签option,在通过append将文本写 ...

  10. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

随机推荐

  1. 【http转https】其之三 IIS_URL重写_http重定向到https

    IIS_URL重写_http重定向到https 文:铁乐猫 2016年1月14日 IIS7以上支持URL Rewrite这个模块了,所以在我们做好了ssl证书这一块之后, 要对来自http的请求重定向 ...

  2. linux svn up 中文显示乱码解决办法

    vi /etc/sysconfig/i18n #LANG="en_US.UTF-8" #LANG=zh_CN.GB18030 #LC_ALL=zh_CN.GB18030 #SYSF ...

  3. 房上的猫：JavaDoc注释

    //这是一个注释 /*   *这是一个演示程序   */ /**    *@这是JavaDoc注释.   */ JavaDoc注释 背景: javadoc是Sun公司提供的一个技术,它从程序源代码中抽 ...

  4. spring boot 之热部署(三)

    热部署:当发现程序修改时自动启动应用程序. spring boot使用的是spring-boot-devtools是一个为开发者服务的一个模块.其原理用了classLoader 其中一个加载不变的类, ...

  5. nodejs 之 nvm和pm2

    说道 node不得不提到nodejs的版本管理nvm和Node应用的进程管理器pm2. 当然,关于这两个的介绍的文章那么多,随意baidu,bing,google就可以. 我这里是给自己打一个标签,方 ...

  6. [整理]HTTPS和SSL证书

    在互联网安全通信方式上,目前用的最多的就是https配合ssl和数字证书来保证传输和认证安全了.本文追本溯源围绕这个模式谈一谈. 名词解释 首先解释一下上面的几个名词: • https:在http(超 ...

  7. OpenCV2.4.9 Qt5.3.1 开发环境配置错误原因与解决方案

    问题原因与解决办法 A.配置完成后,示例程序无法正常显示图片且程序无法运行 出现原因:环境变量未正确配置 解决办法:检查环境变量,添加缺失的环境变量 B.出"未定义的引用..."类 ...

  8. 系统启动时，dts怎么被加载的？

    转:http://blog.csdn.net/lichengtongxiazai/article/details/38941913 此文章针对高通msm8953平台,启动过程中,bootloader( ...

  9. CSS清除浮动的几种方式

    浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...

  10. 使用Android-PullToRefresh实现下拉刷新功能

    源代码:https://github.com/chrisbanes/Android-PullToRefresh 一. 导入类库 将Library文件夹作为Android项目Import到Eclipse ...