<%@ 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. IT服务(运维)管理实施的几个要点--第二章 人员和组织架构

    子曰"没有合适的人" 在流程化的管理模式下,最容易步入的一个误区是按流程设计一个"理想的"组织架构,然后对应于这个架构对人员进行评估.培养,甚至是更换.我见过很 ...

  2. c# 调用python语言

    config   文件配置 <configuration>节中 第一个的位置插入如下节点,版本根据实际用到的来写 <configSections>    <section ...

  3. 三：Redis连接池、JedisPool详解、Redisi分布式

    单机模式: package com.ljq.utils; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; ...

  4. 454ITS数据按barcode和primer分类程序v1.0

    不知道有什么好办法可以让primer允许漏配,现在仅仅是允许错配,还是有一些没有配上,454数据有些primer漏配了一些,下一步解决这个问题 #include <cstdio> #inc ...

  5. rpc之thrift

    rpc之thrift 一.介绍 thrift是一个rpc(remove procedure call)框架,可以实现不同的语言(java.c++.js.python.ruby.c#等)之间的相互调用. ...

  6. Sql 关于 查俩个表 第二个表用到第一个表的某一个数据

    今天在写程序的时候遇到一个问题  有一个这个需求 select top 1 Name,[Address] from UserInfo;select * from shoppingAddress whe ...

  7. ThreadPool.QueueUserWorkItem引发的血案，线程池异步非正确姿势导致程序闪退的问题

    ThreadPool是.net System.Threading命名空间下的线程池对象.使用QueueUserWorkItem实现对异步委托的先进先出有序的回调.如果在回调的方法里面发生异常则应用程序 ...

  8. [转]C#异步的世界【上】

    阅读目录   APM EAP TAP 延伸思考 新进阶的程序员可能对async.await用得比较多,却对之前的异步了解甚少.本人就是此类,因此打算回顾学习下异步的进化史. 本文主要是回顾async异 ...

  9. CentOS配置SSH免密登录

    假如我们有两台CentOS机器,192.168.199.101,192.168.199.102,要想在101上远程连接102可以通过ssh命令来实现 ssh 192.168.199.102 如果没有配 ...

  10. 大数据分析中Redis怎么做到220万ops

    大数据时代,海量数据分析就像吃饭一样,成为了我们每天的工作.为了更好的为公司提供运营决策,各种抖机灵甚至异想天开的想法都会紧跟着接踵而来!业务多变,决定了必须每天修改系统,重新跑数据,这就要求极高的海 ...