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实现级联下拉框的小例子,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
javascript的内存管理详解
Aug 07 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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
You might like
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
用于table内容排序
2006/07/21 Javascript
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
详解python UDP 编程
2020/08/24 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
为什么要使用servlet
2016/01/17 面试题
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
员工工作自我评价
2014/09/26 职场文书
长城的导游词
2015/01/30 职场文书
师德师风培训感言
2015/08/03 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL