jQuery实现多级联动下拉列表查询框


Posted in Javascript onJanuary 18, 2016

本文实例介绍了jQuery实现多级联动下拉列表查询框的详细代码,分享给大家供大家参考,具体内容如下

 效果图:

jQuery实现多级联动下拉列表查询框

具体代码:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title></title>
  <meta name="keywords" content=" keywords" />
  <meta name="description" content="description" />
</head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
<style type="text/css">
  body{font-size:13px}
  .clsInit{width:435px;height::35px;line-height:35px;padding-left:10px}
  .clsTip{padding-top:5px;background-color:#eee;display:none}
  .btn{border:solid 1px #666;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;filter:progid:DXImageTransform.Mcrosoft.Gradient(GraientType=0,StartColorStr=#FFFFFF,EndColorStr=#ECE9D8);}
</style>
<body>
<script type="text/javascript">
  $(function(){
    function objInit(obj){
      return $(obj).html('<option>请选择</option>');
    }
    var arrData={
      厂商1:
      {
        品牌一:'型号1-1-1,型号1-1-2',
        品牌二:'型号1-2-1,型号1-2-2'
      },
      厂商2:
      {
        品牌一:'型号2-1-1,型号2-1-2',
        品牌二:'型号2-2-1,型号2-2-2'},
      厂商3:
      {
        品牌一:'型号3-1-1,型号3-1-2',
        品牌二:'型号3-2-1,型号3-2-2'
      }
    };
    $.each(arrData,function(pF){
      $('#selF').append('<option>'+pF+'</option>');
    });
    $('#selF').change(function(){
      objInit('#selT');
      objInit('#selC');
      $.each(arrData,function(pF,pS){
        if($('#selF option:selected').text()==pF){
          $.each(pS,function(pT,pC){
            $('#selT').append('<option>'+pT+'</option>');
          });
          $('#selT').change(function(){
            objInit('#selC');
            $.each(pS,function(pT,pC){
              if($('#selT option:selected').text()==pT){
                $.each(pC.split(","),function(){
                  $('#selC').append('<option>'+this+'</option>');
                })
              }
            })
            
          });
        }
      })
    });
  });
</script>

<div class="clsInit">

  厂商:<select id="selF"><option>请选择</option></select>
  品牌:<select id="selT"><option>请选择</option></select>
  型号:<select id="selC"><option>请选择</option></select>
  <input type="button" value="查询" id="Button1" class="btn" />
</div>
<div class="clsInit" id="divTip"></div>

</body>
</html>

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
原生js滑动轮播封装
Jul 31 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
jquery validate表单验证的基本用法入门
Jan 18 #Javascript
jQuery添加删除DOM元素方法详解
Jan 18 #Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 #Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 #Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 #Javascript
实例详解jQuery表单验证插件validate
Jan 18 #Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 #Javascript
You might like
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python实现IOU计算案例
2020/04/12 Python
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
求职信模板怎么做
2014/01/26 职场文书
高校教师自荐信范文
2014/03/13 职场文书
党风廉设责任书
2014/04/16 职场文书
四年级小学生评语
2014/12/26 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
同学聚会通知书
2015/04/20 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
分享几个实用的CSS代码块
2022/06/10 HTML / CSS