编程 Javascript

JQuery实现级联下拉框效果实例讲解

Posted in Javascript onSeptember 17, 2015

用JQuery和select来实现汽车厂商和汽车类型的联动，参考过程如下
效果图：

JQuery实现级联下拉框效果实例讲解

逻辑分析图：

JQuery实现级联下拉框效果实例讲解

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>级联下拉框效果</title> 
<link rel="stylesheet" type="text/css" href="css/chainselect.css"> 
<script language="javascript" type="text/javascript" src="js/jquery.js"></script> 
<script language="javascript" type="text/javascript" src="js/chainselect.js"></script> 
</head> 
 
<body> 
 <div class="car"> 
  <span class="carname"> 
   汽车厂商： 
   <select> 
    <option value="">请选择汽车厂商</option> 
    <option value="BMW">宝马</option> 
    <option value="Audi">奥迪</option> 
    <option value="VW">大众</option> 
   </select> 
   <img src="images/pfeil.gif" alt="有数据"/> 
  </span> 
  <span class="cartype"> 
   汽车类型： 
   <select></select> 
  </span>  
 </div> 
</body> 
</html>

css代码：

.car { 
 text-align:center; 
} 
.cartype{ 
 display:none; 
}

js代码：

$(document).ready(function(){ 
 //找到下拉框 
 var carnameSelect = $(".carname").children("select"); 
 var cartypeSelect = $(".cartype").children("select"); 
  
 //给下拉框注册事件 
 carnameSelect.change(function(){ 
  var carnameValue = $(this).val(); 
  if( carnameValue != ""){ 
   //carnameValue不为空的情况接着判断 
   if(!carnameSelect.data(carnameValue)){ 
    //不在缓冲区中,需要向服务器请求 
    $.post("ChainSelect",{keyword:carnameValue,type:"top"},function(data){ 
     if (data.length != 0){ 
      //返回的数据不为空 
      cartypeSelect.html(""); 
      $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect); 
      for(var i = 0;i < data.length; i++ ){ 
       $("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(cartypeSelect); 
      } 
      cartypeSelect.parent().show(); 
      carnameSelect.next().show(); 
     }else{ 
      //返回的数据为空 
      cartypeSelect.parent().hide(); 
      carnameSelect.next().hide(); 
     } 
     carnameSelect.data(carnameValue,data); 
    },"json"); 
   }else{ 
    //在缓冲区中 
    var data = carnameSelect.data(carnameValue); 
    if (data.length != 0){ 
      //返回的数据不为空 
      cartypeSelect.html(""); 
      $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect); 
      for(var i = 0;i < data.length; i++ ){ 
       $("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(cartypeSelect); 
      } 
      cartypeSelect.parent().show(); 
      carnameSelect.next().show(); 
     }else{ 
      //返回的数据为空 
      cartypeSelect.parent().hide(); 
      carnameSelect.next().hide(); 
     } 
   } 
  }else{ 
   //carnameValue为空的情况，隐藏第二个下拉框 
   cartypeSelect.parent().hide(); 
   carnameSelect.next().hide(); 
  } 
 }); 
  
});

如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是利用JQuery和select实现级联下拉框的小例子，希望对大家的学习有所帮助。

JQuery实现级联下拉框效果实例讲解

- Author -

lijiao

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

Javascript 相关文章推荐

Jquery 学习笔记（一）

Oct 13 Javascript

(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享

Jan 24 Javascript

根据表格中的某一列进行排序的javascript代码

Nov 29 Javascript

使用Chrome调试JavaScript的断点设置和调试技巧

Dec 16 Javascript

Jquery ajax加载等待执行结束再继续执行下面代码操作

Nov 24 Javascript

javascript加载xml 并解析各节点的值(实现方法)

Oct 12 Javascript

js实现文字跑马灯效果

Feb 23 Javascript

webpack external模块的具体使用

Mar 10 Javascript

基于Vue自定义指令实现按钮级权限控制思路详解

May 23 Javascript

JavaScript数组去重的几种方法

Apr 07 Javascript

vue-cli3中vue.config.js配置教程详解

May 29 Javascript

js如何实现元素曝光上报

Aug 07 Javascript

JS+CSS实现精美的二级导航效果代码

Sep 17 #Javascript

jQuery实现仿腾讯迷你首页选项卡效果代码

Sep 17 #Javascript

jQuery实现仿美橙互联两级导航菜单效果完整实例

Sep 17 #Javascript

JS实现无限级网页折叠菜单(类似树形菜单)效果代码

Sep 17 #Javascript

jQuery实现折叠、展开的菜单组效果代码

Sep 16 #Javascript

ANGULARJS中使用JQUERY分页控件

Sep 16 #Javascript

js实现tab切换效果实例

Sep 16 #Javascript