编程 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技术实现Tab页界面之二

Sep 21 Javascript

jquery使用淘宝接口跨域查询手机号码归属地实例

Nov 28 Javascript

JavaScript中的原型prototype属性使用详解

Jun 05 Javascript

JavaScript获取客户端IP的方法(新方法)

Mar 11 Javascript

防止重复发送 Ajax 请求

Feb 15 Javascript

JS实现仿UC浏览器前进后退效果的实例代码

Jul 17 Javascript

解析vue路由异步组件和懒加载案例

Jun 08 Javascript

Vue2.0 实现歌手列表滚动及右侧快速入口功能

Aug 08 Javascript

微信小程序实现无限滚动列表

May 29 Javascript

微信小程序实现文字从右向左无限滚动

Nov 18 Javascript

微信小程序授权登陆及每次检查是否授权实例代码

Sep 18 Javascript

详解JavaScript的计时器和按钮效果设置

Feb 18 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