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作用域和闭包使用详解
Apr 25 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
JS模拟实现哈希表及应用详解
May 04 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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 字符串分割和比较
2009/10/06 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
ECMAScript 基础知识
2007/06/29 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
js脚本实现数据去重
2014/11/27 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
pandas取出重复数据的方法
2019/07/04 Python
python3实现绘制二维点图
2019/12/04 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
基于python实现查询ip地址来源
2020/06/02 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
行政人员岗位职责
2013/12/08 职场文书
自荐信需注意事项
2014/01/25 职场文书
广告学毕业生求职信
2014/01/30 职场文书
美容院经理岗位职责
2014/04/03 职场文书
供电工程专业求职信
2014/08/09 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers