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 可以拖动的DIV(二)
Jun 26 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
php 字符转义 注意事项
2009/05/27 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
python 如何引入协程和原理分析
2020/11/30 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
客服工作职责
2013/12/11 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
项目经理任命书范本
2014/06/05 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
运动会入场词
2015/07/18 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS