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. Hangfire初探

    Hangfire 是什么? Hangfire 是一个定时任务的管理后台,它拥有定时任务功能和及其相关的管理后台界面.Hangfire 原生使用 .NET 开发的,同时支持 .NET 和 .NET Co ...

  2. 从国内下载Linux的CentOS系统

    http://mirror.nsc.liu.se/centos-store/7.3.1611/isos/x86_64/

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

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

  4. 3680: 吊打XXX

    3680: 吊打XXX 链接 思路: 模拟退火. 代码: 跑的特别慢... #include<cstdio> #include<algorithm> #include<c ...

  5. CLR via c#读书笔记九：字符、字符串和文本处理

    1.在.NET Framework中,字符总是表示成16位unicode代码值(关于unicode.utf8等可以到http://www.ruanyifeng.com/blog/2007/10/asc ...

  6. TPO-16 C1 Reserve the room for a rehearsal

    TPO-16 C1 Reserve the room for a rehearsal 第 1 段 1.Listen to a conversation between a Student and a ...

  7. 在Arch上安装VSCode的方法

    首先去特硬去下载vscode的安装包 mkdir /tmp/vscode cd /tmp/vscode/ wget https://az764295.vo.msecnd.net/public/0.3. ...

  8. 数据库Mysql的学习(三)-各种约束

    删除数据库表 drop table [if exists] 表一,表二.....; 表分区:比如图书信息表有1000万个图书信息,如何优化他,其中一种方式就是表分区.就是把一张表的数据分成多个区块,这 ...

  9. pthon web框架flask（二）--快速入门

    快速入门 迫切希望上手?本文提供了一个很好的 Flask 介绍.假设你已经安装 Flask, 如果还没有安装话,请浏览下 安装 . 一个最小的应用 一个最小的应用看起来像这样: from flask ...

  10. C++复合类型(结构，共用体，枚举)

    •结构是用户定义的类型,而结构的声明定义了这种类型的数据属性. 一.关键字struct声明:   定义了一种新类型 struct inflatable{ char name[20];//结构成员 fl ...