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 相关文章推荐
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
js面向对象编程总结
Feb 16 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 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
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
python编写暴力破解FTP密码小工具
2014/11/19 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
生日寄语大全
2014/04/08 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
甜品店创业计划书
2014/08/14 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
Promise静态四兄弟实现示例详解
2022/07/07 Javascript