编程 Javascript

几种二级联动案例（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;
 }

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

?>

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

几种二级联动案例（jQuery\Array\Ajax php）

- Author -

somnusy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery文字列表向上滚动的代码

Nov 13 Javascript

对 jQuery 中 data 方法的误解分析

Jun 18 Javascript

javascript禁止访客复制网页内容的实现代码

Aug 05 Javascript

JavaScript 封装一个tab效果源码分享

Sep 15 Javascript

使用getBoundingClientRect方法实现简洁的sticky组件的方法

Mar 22 Javascript

javascript检测移动设备横竖屏

May 21 Javascript

bootstrap配合Masonry插件实现瀑布式布局

Jan 18 Javascript

Bootstrap导航中表单简单实现代码

Mar 06 Javascript

详解React 在服务端渲染的实现

Nov 16 Javascript

Angular4自制一个市县二级联动组件示例

Nov 21 Javascript

解决webpack无法通过IP地址访问localhost的问题

Feb 22 Javascript

微信小程序的mpvue框架快速上手指南

May 15 Javascript

漂亮! 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