1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <meta charset="utf-8" />
  7.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  8.     <style type="text/css">
  9.         body {
  10.             font-size:13px;text-align:center;
  11.         }
  12.         div {
  13.             width:400px;border:1px solid #000000;
  14.             background-color:#f5e8e8;margin:100px 300px;
  15.             padding:10px;
  16.         }
  17.     </style>
  18.     <script type="text/javascript">
  19.         $(function () {
  20.             function Init(node) {
  21.                 return node.html("<option>---请选择---</option>");
  22.             }
    　　　　　　　//多维数组做数据来源
  23.             var db = {
  24.                 腾讯: {
  25.                     LOL: "德玛,EZ瑞尔,剑圣",
  26.                     BNS: "气功师,力士,刺客,气宗师",
  27.                     DNF:"A,B,C,D"
  28.                 },
  29.                 阿里巴巴: {
  30.                     APPLAY: "AL,EZ瑞尔,剑圣",
  31.                     HUABEI: "AL,力士,刺客,气宗师",
  32.                     JIEBEI: "AL,B,C,D"
  33.                 },
  34.                 百度: {
  35.                     ggs: "BD,EZ瑞尔,剑圣",
  36.                     BD: "BD,力士,刺客,气宗师",
  37.                     BDBD: "BD,B,C,D",
  38.                 }
  39.             };
    　　　　　　　　//初始化select节点
  40.             $.each(db, function (changShang) {
  41.                 $("#selF").append("<option>" + changShang + "</option>");
  42.             })
  43.             //一级变动
  44.             $("#selF").change(function () {
  45.                 //清空二三级
  46.                 Init($("#selB"));
  47.                 Init($("#selC"));
  48.                 $.each(db,function (cs,pps) {
  49.                     if ($("#selF option:selected").text() == cs) {
  50.                         $.each(pps, function (pp, xhs) {
  51.                             $("#selB").append("<option>" + pp + "</option>");
  52.                         });
  53.                         $("#selB").change(function () {
  54.                             Init($("#selC"));
  55.                             $.each(pps, function (pp,xhs) {
  56.                                 if ($("#selB option:selected").text()==pp) {
  57.                                     $.each(xhs.split(','), function () {
  58.                                         $("#selC").append("<option>" + this + "</option>");
  59.                                     })
  60.                                 }
  61.                             })
  62.                         })
  63.                     }
  64.                 })
  65.             })
  66.  
  67.         })
  68.     </script>
  69. </head>
  70. <body>
  71.     <div class="bg-primary">
  72.         <hr />
  73.         企业：<select id="selF">
  74.                <option>---请选择---</option>
  75.         </select>
  76.         产品：<select id="selB">
  77.                <option>---请选择---</option>
  78.         </select>
  79.         嗯嗯：<select id="selC">
  80.                <option>---请选择---</option>
  81.         </select>
  82.         <p id="pid"></p>
  83.     </div>
  84. </body>
  85. </html>

jQuery实现三级联动的更多相关文章

  1. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  2. jquery省市区三级联动

    jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...

  3. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  4. jQuery实现三级联动菜单（鼠标悬停联动）

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> < ...

  5. jquery 城市三级联动

    js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...

  6. jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

    很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...

  7. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

  8. jquery+ligerform三级联动下拉框

    如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...

  9. JS(JQuery) 省市区三级联动下拉选择

    引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...

随机推荐

  1. python类的封装

    Python之类的封装 1. 什么是封装 装:往容器/名称空间里存入名字 封:代表将存放于名称空间中的名字给藏起来,这种隐藏对外不对内(怎么做到的,在下文解释) 2. 为何要封装 封数据属性:不想要给 ...

  2. Goland的常用快捷键

    文件相关快捷键: CTRL+E,打开最近浏览过的文件. CTRL+SHIFT+E,打开最近更改的文件. CTRL+N,可以快速打开struct结构体. CTRL+SHIFT+N,可以快速打开文件. 代 ...

  3. PHP.47-TP框架商城应用实例-后台22-权限管理-角色和管理员的关系

    角色和管理员的关系 角色功能 管理员功能 角色与管理的关联要通过管理-角色表进行{多对多} /********* 管理-角色表 *********/ drop if exists p39_admin_ ...

  4. 成都Uber优步司机奖励政策（1月16日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. LeetCode: 56. Merge Intervals（Medium）

    1. 原题链接 https://leetcode.com/problems/merge-intervals/description/ 2. 题目要求 给定一个Interval对象集合,然后对重叠的区域 ...

  6. （AOSP）repo checkout指定版本

    aosp 怎么切换分支? To properly switch Android version, all you need to change is branch for your manifest ...

  7. OpenCV 3.2 Tracking 物体跟踪

    跟踪就是在连续视频帧中定位物体,通常的跟踪算法包括以下几类: 1. Dense Optical Flow 稠密光流 2. Sparse Optical Flow 稀疏光流 最典型的如KLT算法(Kan ...

  8. 【springboot-01】整合quartz

    1.什么是quartz? quartz是一个开源的定时任务框架,具备将定时任务持久化至数据库以及分布式环境下多节点调度的能力.当当的elastic-job便是以quartz为基础,结合zookeepe ...

  9. OSG-粒子系统和初步

    本文转至http://www.cnblogs.com/shapherd/archive/2010/08/10/osg.html 作者写的比较好,再次收藏,希望更多的人可以看到这个文章 互联网是是一个相 ...

  10. ubuntu16.04图形界面安装中文输入法，中文展示

    打开system Settings 设置   打开设置语言   安装Language Support   点击installed languages 选择chinese 打勾,安装   安装IBus框 ...