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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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生成静态HTML文档的原理
2012/10/29 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP常用技巧汇总
2016/03/04 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php中的登陆login实例代码
2016/06/20 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
python实现中文分词FMM算法实例
2015/07/10 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python 实现矩阵填充0的例子
2019/11/29 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
学习Python需要哪些工具
2020/09/04 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
优秀社区干部事迹材料
2014/02/03 职场文书
五一口号
2014/06/19 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
python turtle绘图命令及案例
2021/11/23 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript