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 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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
搜索引擎技术核心揭密
2006/10/09 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Python易忽视知识点小结
2015/05/25 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
详解Python pygame安装过程笔记
2017/06/05 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
给物业的表扬信
2014/01/21 职场文书
公关活动策划方案
2014/05/25 职场文书
英语专业求职信
2014/07/08 职场文书
党员个人公开承诺书
2014/08/29 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
幼师辞职信范文
2015/02/27 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
运动会开幕式致辞
2015/07/29 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
MySQL笔记 —SQL运算符
2022/01/18 MySQL
SQL语句多表联合查询的方法示例
2022/04/18 MySQL