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

2024-05-06 14:53:11

字体：大中小

来源：转载

供稿：网友

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

二级联动（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>

上一篇：jquery实现垂直和水平菜单导航栏

下一篇：JavaScript中的对象和原型(一)