Scripts/Category.js

//Jquery三级类别联动

$(function () {

    BindCategory();

})

function BindCategory() {

    var $txtCategory = $("#txtCategoryId");

    var _selectId = ["selBigClass", "selSmallClass", "selThreeClass"];

    for (var i = 0; i < _selectId.length; i++) {

        var select = document.createElement("select");

        select.id = _selectId[i];

        select.name = _selectId[i];

        $txtCategory.parent().append(select);

    }

    var $selBigClass = $("#selBigClass");

    var $selSmallClass = $("#selSmallClass");

    var $selThreeClass = $("#selThreeClass");

    $selSmallClass.hide();

    $selThreeClass.hide();

    $.getJSON("Scripts/CategoryJson.js", function (json) {

        var html = ['<option value="">请选择大类</option>'];

        for (var key in json) {

            if (json[key].pid == 0) {

                html.push('<option value="' + json[key].id + '">' + json[key].name + '</option>');

            }

        }

        //第一级类别

        $selBigClass.empty().append(html.join('')).change(function () {

            $txtCategory.val(this.value);

            $selThreeClass.hide();

            $selSmallClass.show();

            var html = ['<option value="">请选择小类</option>'];

            for (var data in json) {

                if (json[data].pid == $("#selBigClass").val()) {

                    html.push('<option value="' + json[data].id + '">' + json[data].name + '</option>');

                }

            }

            //第二级类别

            $selSmallClass.empty().append(html.join('')).change(function () {

                $txtCategory.val(this.value);

                $selThreeClass.show();

                var html = ['<option value="">请选择小类</option>'];

                for (var data in json) {

                    if (json[data].pid == $selSmallClass.val()) {

                        html.push('<option value="' + json[data].id + '">' + json[data].name + '</option>');

                    }

                }

                //第三级类别

                $selThreeClass.empty().append(html.join('')).change(function () {

                    $txtCategory.val(this.value);

                });

                //如果不存在第三级类别则隐藏第三级类别控件

                if ($selThreeClass.get(0).options.length <= 1) {

                    $selThreeClass.hide();

                    return false;

                }

            });

            //如果不存在第二级类别则隐藏第二级类别控件

            if ($selSmallClass.get(0).options.length <= 1) {

                $selSmallClass.hide();

                return false;

            }

        });

    });

};

Scripts/CategoryJson.js（如何生成json数据详见：http://www.cnblogs.com/haozhenjie819/p/3601676.html）

[{ "id": 31, "name": "\u65b0\u95fb\u4e2d\u5fc3", "pid": 0, "itemvalue": "|0|" },

{ "id": 59, "name": "\u52a0\u76df\u5408\u4f5c", "pid": 0, "itemvalue": "|0|" },

{ "id": 65, "name": "\u4ea7\u54c1\u670d\u52a1", "pid": 0, "itemvalue": "|0|" },

{ "id": 60, "name": "\u52a0\u76df\u987b\u77e5", "pid": 59, "itemvalue": "|0|59|" },

{ "id": 61, "name": "\u52a0\u76df\u6d41\u7a0b", "pid": 59, "itemvalue": "|0|59|" },

{ "id": 62, "name": "\u52a0\u76df\u533a\u57df", "pid": 59, "itemvalue": "|0|59|" },

{ "id": 70, "name": "\u63a8\u8350\u670d\u52a1", "pid": 65, "itemvalue": "|0|65|" },

{ "id": 71, "name": "\u8ba1\u8d39\u65b9\u5f0f", "pid": 65, "itemvalue": "|0|65|" },

{ "id": 72, "name": "\u7528\u6237\u987b\u77e5", "pid": 65, "itemvalue": "|0|65|" },

{ "id": 73, "name": "\u7981\u5bc4\u8303\u56f4", "pid": 65, "itemvalue": "|0|65|" },

{ "id": 75, "name": "\u666e\u901a\u5feb\u9012", "pid": 70, "itemvalue": "|0|65|70|" },

{ "id": 76, "name": "\u7279\u79cd\u5feb\u4ef6", "pid": 70, "itemvalue": "|0|65|70|" },

{ "id": 77, "name": "\u9650\u65f6\u6d3e\u9001", "pid": 70, "itemvalue": "|0|65|70|" },

{ "id": 78, "name": "\u4ee3\u6536\u8d37\u6b3e", "pid": 70, "itemvalue": "|0|65|70|" },

{ "id": 79, "name": "\u4fdd\u4ef7\u670d\u52a1", "pid": 70, "itemvalue": "|0|65|70|" },

{ "id": 80, "name": "\u4ee3\u7b7e\u56de\u5355", "pid": 70, "itemvalue": "|0|65|70|"}]

html页面

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>三级联动</title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script src="Scripts/Category.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

         <table>

            <tr>

                <td >新闻类别：</td>

                <td > <input id="txtCategoryId" name="txtCategoryId" type="hidden" runat="server" /></td>

            </tr>

        </table>

    </form>

</body>

</html>

效果图

知识点：1、Jquery获取select中option个数

$("#selSmallClass").get(0).options.length

Jquery select 三级联动 (需要JSON数据)的更多相关文章

  1. jquery select三级联动

    需求:对地区进行选择,选择相应的省,就会出现相应范围的市,然后出现相应的范围的县区:如果县不存在,就不现实,自我要求是自己写个简单的插件,方便以后调用: 逻辑:1.通过div的类名来获取,其下的sel ...

  2. 将省市县三级联动的json数据，转化为element-ui能用的格式，并使用

    var options=[]; var cities = { '北京': { '北京': ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区 ...

  3. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  4. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  5. jquery省市区三级联动

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

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

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

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

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

  8. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  9. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

随机推荐

  1. java中不常见的关键字：strictfp

    1.strictfp, 即 strict float point (精确浮点). strictfp 关键字可应用于类.接口或方法.使用 strictfp 关键字声明一个方法时,该方法中所有的float ...

  2. windows MinGW gcc 编译乱码问题

    问题描述 一般很多编辑器默认都是保存成utf-8文件,然而在输出中文的时候出现了乱码?另外试了其他方法,有的乱码,有的不乱? MinGW gcc 编译 utf-8 文件的时候乱码 MinGW gcc ...

  3. 人机交互技术 Week 1_人机交互概述

    HCI Week 1_Introduction 18-19学年春夏学期选修了计院万华根老师的人机交互技术课程,老师由于知识产权相关原因不能提供课件,故尽可能对课程内容做详尽的课堂笔记以供复习,如有不妥 ...

  4. consul 初体验

    consul server: 192.168.48.134: #!/bin/bash cd /data/server/consuls nohup /data/server/consuls/consul ...

  5. WUSTOJ 1276: 峰峰不搞G（Java）

    1276: 峰峰不搞G 题目   给 n 数量的油漆,写出最大的数,每个数对应有油漆的花费.更多内容点击标题. 分析   我读完题,就想到用动态规划,结果是Time Limit Exceed.然后看了 ...

  6. SAS学习笔记23 线性回归、多元回归

    线性回归 由样本资料计算的回归系数b和其他统计量一样,存在抽样误差,因此,需要对线性回归方程进行假设检验 1.方差分析 2.t检验 相关系数的假设检验 相关系数(correlation coeffic ...

  7. react中jsx文件是如何转换成js对象的

    通过在线babel转换器,转换出jsx是如何变成js对象的 jsx文件 加入了正常的标签以及嵌套标签以及方法属性 function hello() { click=()=>{ console.l ...

  8. hdu 2544 Dijstra模板题

    最短路 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  9. vue-cli中eslint配置

    在项目目录下找到.eslintrc.js文件,使用编辑器打开进行编辑.在rules下添加space-before-function-paren.space-before-blocks.及semi的配置 ...

  10. elment 中tree组件展开所有和收缩所有

    upAll () { // 全部展开 遍历变成true let self = this; // 将没有转换成树的原数据 let treeList = this.sourceData; for (let ...