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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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数据集构建JSON格式及新数组的方法
2012/11/07 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
读jQuery之二(两种扩展)
2011/06/11 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python提取页面内url列表的方法
2015/05/25 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Python中Selenium库使用教程详解
2020/07/23 Python
python安装sklearn模块的方法详解
2020/11/28 Python
HTML5标签大全
2016/11/23 HTML / CSS
《骆驼和羊》教学反思
2014/02/27 职场文书
2014春晚主持词
2014/03/25 职场文书
领导干部考核评语
2015/01/04 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技