<%@ 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. My Go Resolutions for 2017(from Russ cox's blog)

    我的2017年Go决议 一年之季始于春,我认为写一些今年我希望在Go上做的东西是有意义的. 我每年的目标是帮助Go开发人员.我想确保我们在Go团队中所做的工作对Go开发者有重大的积极影响.可能听起来很 ...

  2. java 类的继承和接口的继承

    父类 public class person { String name; int age; void eat(){ System.out.println("吃饭"); } voi ...

  3. 树上操作[HAOI 2015]

    树链剖分裸题: 树剖点这里:传送门 代码: #include<bits/stdc++.h> #define sight(c) ('0'<=c&&c<='9') ...

  4. CRM项目总结

                CRM项目总结      一:开发背景 在公司日益扩大的过程中,不可避免的会伴随着更多问题出现. 对外 : 如何更好的管理客户与公司的关系?如何更及时的了解客户日益发展的需求变 ...

  5. vexx 邀请码 送3个比特龙

    错过了比特币的行情,注册获取3个原始比特币分叉币,比特龙. 目前10元一个,送3个币.类似于股票IPO,第一天一般会冲高十几倍,建议第一天就卖. 如果看好就继续持有吧. 放心是送的不用钱的. 注册网址 ...

  6. Anaconda使用

    转自PeterYuan   序 Python易用,但用好却不易,其中比较头疼的就是包管理和Python不同版本的问题,特别是当你使用Windows的时候.为了解决这些问题,有不少发行版的Python, ...

  7. 浅淡python中的with，上下文管理器

    例子一 首先来看一段代码: class Foo(object): def __init__(self): print('实例化一个对象') def __enter__(self): print('进入 ...

  8. Transact-SQL参考--学习笔记

    基本的就不累赘了. 运算符 除法: dividend / divisor 如果用一个整数的 divisor 去除整数的 dividend,其结果是一个整数,小数部分被截断,如果要有小数可以将divid ...

  9. JQuery 网页瞄点

    $("html,body").animate({ scrollTop: $("#Content1").offset().top }, 3000); 代码说明:h ...

  10. Java框架之Spring（五）

    本文主要介绍Spring中, 1 Spring JDBC 2 使用注解方式管理事务的传播行为 3 采用XML 方式配置事务 4 SH 整合 5 SSH 整合 一.Spring JDBC 1) 导包 , ...