几种二级联动案例(jQuery\Array\Ajax php)


Posted in Javascript onAugust 13, 2016

在开发过程中,遇到过非常多的二级联动,下面是我总结出来的几种二级联动案例

二级联动(1)
 第一种案例是一种比较简单的二级联动,利用jquery的显示隐藏来实现,对于数据较少的二级联动来说可以采纳

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8" />
<title>二级联动</title> 
 

/*引入jquery文件*/
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript"> 
var currentShowCity=0;
$(document).ready(function(){
 $("#province").change(function(){
 $("#province option").each(function(i,o){
  if($(this).attr("selected"))
  {
  $(".city").hide();
  $(".city").eq(i).show();
  currentShowCity=i;
  }
 });

 });
 $("#province").change();
});

function getSelectValue(){
 alert("1级="+$("#province").val());
 $(".city").each(function(i,o){
  if(i == currentShowCity){
  alert("2级="+$(".city").eq(i).val());
  }

 });

}

</script> 
</head> 

<body> 
 <select id="province"> 
  <option>----请选择省份----</option> 
 <option>北京</option> 
 <option>上海</option> 
 <option>天津</option> 
 </select> 
 <select class="city"> 
  <option>----请选择城市----</option> 
 </select> 
 <select class="city"> 
 <option>东城</option> 
 <option>西城</option> 
 <option>崇文</option> 
 <option>宣武</option> 
 <option>朝阳</option> 
 <option>丰台</option> 
 <option>石景山</option> 
 <option>海淀</option> 
 <option>门头沟</option> 
 <option>房山</option>
 <option>通州</option> 
 <option>顺义</option> 
 <option>昌平</option> 
 <option>平谷</option> 
 <option>怀柔</option>
 <option>密云</option> 
 <option>延庆</option> 
 </select> 
 <select class="city"> 
 <option>黄浦</option> 
 <option>卢湾</option> 
 <option>徐汇</option> 
 <option>长宁</option> 
 <option>静安</option> 
 <option>普陀</option> 
 <option>闸北</option> 
 <option>虹口</option> 
 <option>杨浦</option> 
 <option>闵行</option> 
 <option>宝山</option> 
 <option>嘉定</option> 
 <option>浦东</option> 
 <option>金山</option> 
 <option>松江</option>
 <option>青浦</option> 
 <option>南汇</option> 
 <option>奉贤</option> 
 <option>崇</option> 
 </select> 
 <select class="city"> 
 <option>和平</option> 
 <option>东丽</option> 
 <option>河东</option> 
 <option>西青</option> 
 <option>河西</option>
 <option>津南</option> 
 <option>南开</option> 
 <option>北辰</option> 
 <option>河北</option> 
 <option>武清</option>
 <option>红挢</option> 
 <option>塘沽</option> 
 <option>汉沽</option>
 <option>大港</option> 
 <option>宁河</option> 
 <option>静海</option> 
 <option>宝坻</option> 
 <option>蓟县</option> 

 </select> 
 /*获取数据*/

 <input type="button" value="点我" onclick="getSelectValue();">

</body> 

</html>

二级联动(2)- Array
第二种案例是使用二维数组传数据,使用javascript

<html>
<head>
<meta charset="utf-8" />
<title>二级联动</title> 

<script> 

var arr = new Array();
arr[0 ]="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆" 
arr[1 ]="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明" 
arr[2 ]="和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县" 
arr[3 ]="万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川" 
arr[4 ]="石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水" 
arr[5 ]="太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城" 
arr[6 ]="呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟" 
arr[7 ]="沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛" 
arr[8 ]="长春,吉林,四平,辽源,通化,白山,松原,白城,延边" 
arr[9 ]="哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭" 
arr[10 ]="南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安" 
arr[11 ]="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水" 
arr[12 ]="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州" 
arr[13 ]="福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德" 
arr[14 ]="南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶" 
arr[15 ]="济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽" 
arr[16 ]="郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源" 
arr[17 ]="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州" 
arr[18 ]="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界" 
arr[19 ]="广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮" 
arr[20 ]="南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池" 
arr[21 ]="海口,三亚" 
arr[22 ]="成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州" 
arr[23 ]="贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南" 
arr[24 ]="昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧" 
arr[25 ]="拉萨,日喀则,山南,林芝,昌都,阿里,那曲" 
arr[26 ]="西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛" 
arr[27 ]="兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南" 
arr[28 ]="银川,石嘴山,吴忠,固原" 
arr[29 ]="西宁,海东,海南,海北,黄南,玉树,果洛,海西" 
arr[30 ]="乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博 尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏" 
arr[31 ]="香港" 
arr[32 ]="澳门" 
arr[33 ]="台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖" 
function init()
{

 var city = document.getElementById("city");
 var cityArr = arr[0].split(",");
 for(var i=0;i<cityArr.length;i++)

 {
  city[i]=new Option(cityArr[i],cityArr[i]);
 }

}
function getCity()
{ 
 var pro = document.getElementById("province");
 var city = document.getElementById("city");
 var index = pro.selectedIndex;
 var cityArr = arr[index].split(","); 

 city.length = 0;

 //将城市数组中的值填充到城市下拉框中

 for(var i=0;i<cityArr.length;i++)

 {

  city[i]=new Option(cityArr[i],cityArr[i]);

  }

}

</script>

</head> 
<body onload="init()"> 
<select id="province" size=1 onchange="getCity()"> 
<option value= 0 >北京</option> 
<option value= 1 >上海</option> 
<option value= 2 >天津</option> 
<option value= 3 >重庆</option> 
<option value= 4 >河北</option> 
<option value= 5 >山西</option> 
<option value= 6 >内蒙古</option> 
<option value= 7 >辽宁</option> 
<option value= 8 >吉林</option> 
<option value= 9 >黑龙江</option> 
<option value= 10 >江苏</option> 
<option value= 11 >浙江</option> 
<option value= 12 >安徽</option> 
<option value= 13 >福建</option> 
<option value= 14 >江西</option> 
<option value= 15 >山东</option> 
<option value= 16 >河南</option> 
<option value= 17 >湖北</option> 
<option value= 18 >湖南</option> 
<option value= 19 >广东</option> 
<option value= 20 >广西</option> 
<option value= 21 >海南</option> 
<option value= 22 >四川</option> 
<option value= 23 >贵州</option> 
<option value= 24 >云南</option> 
<option value= 25 >西藏</option> 
<option value= 26 >陕西</option> 
<option value= 27 >甘肃</option> 
<option value= 28 >宁夏</option> 
<option value= 29 >青海</option> 
<option value= 30 >新疆</option> 
<option value= 31 >香港</option> 
<option value= 32 >澳门</option> 
<option value= 33 >台湾</option> 
</select>

<select id="city" style="width:60px"> 
</select> 
</body>
</html>

二级联动(3)- Ajax
 第三种案例是使用ajax

<!DOCTYPE html>

<html>

 <head>

 <title>二级联动</title>

 <meta charset="utf-8" />

 </head>

 

 <body>

 <!-- 二级联动 -->

 <select id="province">

 <option>请选择</option>

 <option>山东省</option>

 <option>辽宁省</option>

 <option>吉林省</option>

 </select>

 <select id="city">

 <option>请选择</option>

 </select>

 <script>
 // 1. 为<select>元素绑定onchange事件

 var provinceEle = document.getElementById("province");
 provinceEle.onchange = function(){
 // 将id为city的元素内容清空

 var city = document.getElementById("city");
 var opts = city.getElementsByTagName("option");
 for(var z=opts.length-1;z>0;z--){
  city.removeChild(opts[z]);
 }
 
 // 2. 获取用户当前选择的省份名称
 var province = provinceEle.value;
 // 3. 创建对应的城市列表 - 数组
 var cities = [];
 switch (province){
  case "山东省":
  cities = ["青岛市","济南市","威海市","日照市","德州市"];
  break;
  case "吉林省":
  cities = ["长春市","松原市","吉林市","通化市","四平市"];
  break;
  case "辽宁省":
  cities = ["沈阳市","大连市","铁岭市","丹东市","锦州市"];
  break;
 }
 // 遍历城市列表
 for(var i=0;i<cities.length;i++){
  // 4. 创建<option>元素
  var option = document.createElement("option");
  // 5. 将城市的信息添加到<option>元素上
  var textNode = document.createTextNode(cities[i]);
  option.appendChild(textNode);
  // 6. 将创建的所有<option>元素添加到id为city元素上
  city.appendChild(option);
 }

 }

 </script>
 </body>
</html>

二级联动(3-1)- Ajax/php 
第三种案例是使用ajax,从php中获取数据

<!DOCTYPE html>
<html>
 <head>
 <title>Ajax案例一</title>
 <meta charset="utf-8" />
 </head>

 

 <body>
 <!-- 二级联动 -->
 <select id="province">
 <option>请选择</option>
 <option>山东省</option>
 <option>辽宁省</option>
 <option>吉林省</option>
 </select>
 <select id="city">
 <option>请选择</option>
 </select>
 <script>
 // 1. 为<select>元素绑定onchange事件
 var provinceEle = document.getElementById("province");
 provinceEle.onchange = function(){
 // 将id为city的元素内容清空
 var city = document.getElementById("city");
 var opts = city.getElementsByTagName("option");
 for(var z=opts.length-1;z>0;z--){
 city.removeChild(opts[z]);
 }
 
 // 2. 获取用户当前选择的省份名称
 var province = provinceEle.value;
 // 3. 创建对应的城市列表 - 数组
 var cities = [];
 switch (province){
 case "山东省":
 cities = ["青岛市","济南市","威海市","日照市","德州市"];
 break;
 case "吉林省":
 cities = ["长春市","松原市","吉林市","通化市","四平市"];
 break;
 case "辽宁省":
 cities = ["沈阳市","大连市","铁岭市","丹东市","锦州市"];
 break;
 }
 // 遍历城市列表

 for(var i=0;i<cities.length;i++){
 // 4. 创建<option>元素
 var option = document.createElement("option");
 // 5. 将城市的信息添加到<option>元素上
 var textNode = document.createTextNode(cities[i]);
 option.appendChild(textNode);
 // 6. 将创建的所有<option>元素添加到id为city元素上
 city.appendChild(option);
 }
 

 }

 </script>
 </body>

</html>

php:

<?php
 // 用于处理客户端请求二级联动的数据
 // 1. 接收客户端发送的省份信息
 $province = $_POST['provcince'];
 // 2. 判断当前的省份信息,提供不同的城市信息
 switch ($province){
 case '山东省':
 echo '青岛市,济南市,威海市,日照市,德州市';
 break;
 case '辽宁省':
 echo '沈阳市,大连市,铁岭市,丹东市,锦州市';
 break;
 case '吉林省':
 echo '长春市,松原市,吉林市,通化市,四平市';
 break;
 }

 // 服务器端响应的是字符串

?>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
漂亮! js实现颜色渐变效果
Aug 12 #Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 #Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 #Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 #Javascript
Javascript中的对象和原型(二)
Aug 12 #Javascript
JavaScript中的对象和原型(一)
Aug 12 #Javascript
JavaScript中对象的不同创建方法
Aug 12 #Javascript
You might like
色色整理的PHP面试题集锦
2012/03/08 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Django的session中对于用户验证的支持
2015/07/23 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
Django-migrate报错问题解决方案
2020/04/21 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
如何用python免费看美剧
2020/08/11 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
单位工程竣工验收方案
2014/03/16 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
开会通知短信大全
2015/04/20 职场文书
单身证明格式样本
2015/06/15 职场文书
经典祝酒词大全
2015/08/12 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书