<%@ 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. volatile作用及相关集合类

    在工作一年多之后,java程序员都会了解到volatile 这个修饰符, 其在多线程环境下解决了long/double写操作的原子性.基本变量的可见性.通过建立内存屏障保证指令有序性 那么在哪些Jav ...

  2. git 分支操作

    查看git分支: git fetch刷新git git branch  -a 列出所有的分支 git checkout origin/要切换的分支 git branch -r 查看远程分支 git c ...

  3. （转）mysql 无法设置外键的原因总结

    在Mysql中创建外键时,经常会遇到问题而失败,这是因为Mysql中还有很多细节需要我们去留意,我自己总结并查阅资料后列出了以下几种常见原因. 1.  两个字段的类型或者大小不严格匹配.例如,如果一个 ...

  4. SQL Server CPU

    解决数据库系统的性能问题可能是一项艰巨的任务.了解如何找到问题很重要,但是了解系统对特定请求作出特定反应的原因更加重要.影响数据库服务器上的 CPU 利用率 的因素有很多:SQL 语句的编译和重新编译 ...

  5. 基于web的网上书城系统开发-----登录注册扩展-------验证码功能

    public class CheckCode extends HttpServlet { private static final long serialVersionUID = 1L; privat ...

  6. CSS Content 属性

    content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...

  7. System.Windows.Forms.PropertyGrid的使用

    PropertyGrid 控件简介 .NET 框架 PropertyGrid 控件是 Visual Studio .NET 属性浏览器的核心.PropertyGrid 控件显示对象或类型的属性,并主要 ...

  8. vb实验7-找出小于18000的最大素数

    vb实验7-找出小于18000的最大素数 vb实验7-找出小于18000的最大素数 ---–写给女朋友的题解 在窗体上画一个文本框,名称为TEXT1,两个命令按钮,C1和 C2,标题分别为" ...

  9. 【转】NO.1、 appium之ios环境搭建

    首先感谢iOS开发同学无私的帮助.   一.环境及版本: xcode:7.1,我是百度下的dmg文件,直接装的,这个太大了,请自行百度,或升级自己的xcode,一般都不需要这一步. appium:1. ...

  10. windows 异常处理

    为了程序的健壮性,windows 中提供了异常处理机制,称为结构化异常,异常一般分为硬件异常和软件异常,硬件异常一般是指在执行机器指令时发生的异常,比如试图向一个拥有只读保护的页面写入内容,或者是硬件 ...