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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
js模拟弹出效果代码修正版
Aug 07 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
Javascript实现信息滚动效果
May 18 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
JS实现手写 forEach算法示例
Apr 29 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
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
用jscript实现新建word文档
2007/06/15 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
js数组的操作详解
2013/03/27 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现批量修改文件名代码
2017/09/10 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python绘图实现显示中文
2019/12/04 Python
Python如何省略括号方法详解
2020/03/21 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
2014年基建工作总结
2014/12/12 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
运动会广播稿200字
2015/08/19 职场文书