<%@ 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. DataInputStream EOFEXCEPTION

    在编写socket通信时,服务端使用了DataInputStream.readUTF()读取字节流时,出现EOFEXCEPTION 原因是客户端没有使用DataOutputStream.writeUT ...

  2. MySQL5.6中date和string的转换和比较

    Conversion & Comparison, involving strings and dates in MySQL 5.6 我们有张表,表中有一个字段dpt_date,SQL类型为da ...

  3. JVM 运行时的内存分配

    首先我们必须要知道的是 Java 是跨平台的.而它之所以跨平台就是因为 JVM 不是跨平台的.JVM 建立了 Java 程序和操作系统之间的桥梁,JVM 是用 C 语言编写,而 C 语言不具备跨平台的 ...

  4. Python第二十一天 fileinput模块

    Python第二十一天    fileinput模块 fileinput模块 fileinput.input([files[, inplace[, backup[, bufsize[, mode[, ...

  5. java构造器执行顺序一个有趣的简单实例

    一 Animal为父类,构造器中调用public(default.protected) say方法,Dog继承了Animal,并重载了say方法.新建Dog对象,查看运行结果,若将Animal中say ...

  6. 用C#实现微信“跳一跳”小游戏的自动跳跃助手

    一.前言: 前段时间微信更新了新版本后,带来的一款H5小游戏“跳一跳”在各朋友圈里又火了起来,类似以前的“打飞机”游戏,这游戏玩法简单,但加上了积分排名功能后,却成了“装逼”的地方,于是很多人花钱花时 ...

  7. 队列详解及java实现

    导读 栈和队列是有操作限制的线性表. 目录 1.队列的概念.特点.存储结构. 2.栈队列的java实现. 概念 队列是一种在一端进行插入,而在另一端进行删除的线性表.1.队列的插入端称为队尾:队列的删 ...

  8. Django学习日记06_视图_URLconf、View

    URLconf Django通过URLconf来响应网页请求,在项目设置settings.py中,设定了ROOT_URLCONF值来指定默认的URLconf(即mysite.urls),当HTTPRe ...

  9. java多线程(四)－自定义线程池

    当我们使用 线程池的时候,可以使用 newCachedThreadPool()或者 newFixedThreadPool(int)等方法,其实我们深入到这些方法里面,就可以看到它们的是实现方式是这样的 ...

  10. python 列表赋值和列表 sort 方法注意的问题

    列表赋值 >>> a = b = [] >>> a.append() >>> a [] >>> b [] >>> ...