jQuery实现三级联动效果


Posted in Javascript onMarch 02, 2017

很久没写了,顺带复习,写了一个jQuery实现的三级联动,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <meta charset="utf-8" />
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <style type="text/css">
    body {
      font-size:13px;text-align:center;
    }
    div {
      width:400px;border:1px solid #000000;
      background-color:#f5e8e8;margin:100px 300px;
      padding:10px;
    }
  </style>
  <script type="text/javascript">
    $(function () {
      function Init(node) {
        return node.html("<option>---请选择---</option>");
      }


 //多维数组做数据来源
      var db = {
        腾讯: {
          LOL: "德玛,EZ瑞尔,剑圣",
          BNS: "气功师,力士,刺客,气宗师",
          DNF:"A,B,C,D"
        },
        阿里巴巴: {
          APPLAY: "AL,EZ瑞尔,剑圣",
          HUABEI: "AL,力士,刺客,气宗师",
          JIEBEI: "AL,B,C,D"
        },
        百度: {
          ggs: "BD,EZ瑞尔,剑圣",
          BD: "BD,力士,刺客,气宗师",
          BDBD: "BD,B,C,D",
        }
      };




//初始化select节点
      $.each(db, function (changShang) {
        $("#selF").append("<option>" + changShang + "</option>");
      })
      //一级变动
      $("#selF").change(function () {
        //清空二三级
        Init($("#selB"));
        Init($("#selC"));
        $.each(db,function (cs,pps) {
          if ($("#selF option:selected").text() == cs) {
            $.each(pps, function (pp, xhs) {
              $("#selB").append("<option>" + pp + "</option>");
            });
            $("#selB").change(function () {
              Init($("#selC"));
              $.each(pps, function (pp,xhs) {
                if ($("#selB option:selected").text()==pp) {
                  $.each(xhs.split(','), function () {
                    $("#selC").append("<option>" + this + "</option>");
                  })
                }
              })
            })
          }
        })
      })

    })
  </script>
</head>
<body>
  <div class="bg-primary">
    <hr />
    企业:<select id="selF">
        <option>---请选择---</option>  
    </select>
    产品:<select id="selB">
        <option>---请选择---</option>  
    </select>
    嗯嗯:<select id="selC">
        <option>---请选择---</option>  
    </select>
    <p id="pid"></p>
  </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
深入理解js中的加载事件
Feb 08 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 #Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 #Javascript
JSONP跨域请求
Mar 02 #Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 #Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 #Javascript
如何正确理解javascript的模块化
Mar 02 #Javascript
jquery实现左右滑动式轮播图
Mar 02 #Javascript
You might like
如何将数据从文本导入到mysql
2006/10/09 PHP
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP查询网站的PR值
2013/10/30 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
微信小程序 教程之WXSS
2016/10/18 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python使用建议与技巧分享(一)
2020/08/17 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
火车的故事教学反思
2014/02/11 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
2014年教学工作总结
2014/11/13 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
python for循环赋值问题
2021/06/03 Python
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
java项目构建Gradle的使用教程
2022/03/24 Java/Android
Mysql数据库group by原理详解
2022/07/07 MySQL