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 相关文章推荐
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
微信小程序实现点击生成随机验证码
Sep 09 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中csv文件的若干读写方法小结
2018/07/04 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
园林技术个人的自我评价
2014/02/15 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
Python编解码问题及文本文件处理方法详解
2021/06/20 Python