<!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>

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. Go语言入门（二）Go语言中的变量、常量、数据类型、流程控制以及函数

    Go语言中的变量 通常用var关键声明变量,有常规方式和简化方式. 常规方式: var name1 type1 name1 = value1 //赋值 简化方式: var name2 = value1 ...

  2. 浅谈Hash在多个字符串匹配类型问题中的应用

    在生活中们有时会遇到一些有关字符串匹配的问题. 这时打暴力往往显得很愚蠢,效率低下. 所以就需要一些算法和数据结构来提高效率. Hash Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把 ...

  3. [python3.x]win 7 下Pyinstaller库的安装与使用---探索之路

    一.下载安装包 cmd进入命令行,执行命令:pip install https://github.com/pyinstaller/pyinstaller/archive/develop.tar.gz ...

  4. ORB-SLAM（七）ORBextractor 特征提取

    该类中主要调用OpenCV中的函数,提取图像中特征点(关键点及其描述,描述子,以及图像金字塔) 参考TUM1.yaml文件中的参数,每一帧图像共提取1000个特征点,分布在金字塔8层中,层间尺度比例1 ...

  5. 使用AutoFac实现依赖注入(封装一个注册类)

    public class AutoFacBootStrapper { public static void CoreAutoFacInit() { var builder = new Containe ...

  6. shell 批量压缩指定目录及子目录内图片的方法

    用户上传的图片,一般都没有经过压缩,造成空间浪费.因此需要编写一个程序,查找目录及子目录的图片文件(jpg,gif,png),将大于某值的图片进行压缩处理. 查看目录文件大小 du -h --max- ...

  7. 「日常训练」ZgukistringZ（Codeforces Round #307 Div. 2 B）

    题意与分析(CodeForces 551B) 这他妈哪里是日常训练,这是日常弟中弟. 题意是这样的,给出一个字符串A,再给出两个字符串B,C,求A中任意量字符交换后(不限制次数)能够得到的使B,C作为 ...

  8. Django模型与创建管理员用户

    默认情况下, 配置使用SQLite:

  9. 第七模块：项目实战一 第1章 项目实战：CRM客户关系管理系统开发

    01-crm介绍 02-权限系统介绍 03-第一版表结构设计 04-第二版表结构设计 05-orm中创建表结构 06-销售管理系统业务 07-销售管理系统权限信息录入 08-快速实现简单的权限控制的设 ...

  10. 阿里云ECS下CentOS7.4 yum安装Python3.6环境

    一.安装EPEL和IUS软件源 二.安装Python3.6 三.创建python3软链接连接符 四.安装pip3 五.创建pip3链接符 六.进行验证是否安装成功 一.安装EPEL和IUS软件源 yu ...