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 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
PHP 替换模板变量实现步骤
2009/08/24 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP session 会话处理函数
2016/06/06 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
python2和python3哪个使用率高
2020/06/23 Python
python调用百度API实现人脸识别
2020/11/17 Python
pymysql模块使用简介与示例
2020/11/17 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
中职生自荐信
2013/10/13 职场文书
平民服装店创业计划书
2014/01/17 职场文书
会计自我鉴定
2014/02/04 职场文书
2015小学师德工作总结
2015/07/21 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Python 中random 库的详细使用
2021/06/03 Python