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. c++学习总结（一）------类结构学习

    基类的构造函数并没有被派生类继承 析构函数和拷贝赋值操作符同样也没有 类的设计者通过把成员函数声明为 const 以表明它们不修改类对象 把一个修改类数据成员的函数声明为 const 是非法的 (51 ...

  2. 原来你是这样的PaaS！

    啥叫PaaS? 许多人身处互联网领域,对PaaS仍然是雾里看花.它看似复杂,其实只要用对看法,人人都可以轻松的认识它. 网络上盛传着用pizza为例子帮助人们了解什么是PaaS,那么编者今天也不举栗子 ...

  3. （转）从0移植uboot (四) _点亮调试LED

    这一节主要讨论1个问题:点灯.点灯是实际开发中,特别是裸板开发中常见的调试手段,相当于主机开发中漫天飞舞的printf/printk.为了追踪程序的现场执行情况,很多时候我们都使用点一个灯的方法来进行 ...

  4. JVM命令行参数解析

    1. java命令行参数 先看java命令行的参数 solr@2f1fe8cc9f09:/opt/solr/server/solr-webapp/webapp$ java Usage: java [- ...

  5. List 集合的常用方法总结

    @org.junit.Test public void testListToCompare() { List<String> list1 = new ArrayList<>() ...

  6. Shell脚本基础学习

    Shell脚本基础学习 当你在类Unix机器上编程时, 或者参与大型项目如k8s等, 某些框架和软件的安装都是使用shell脚本写的. 学会基本的shell脚本使用, 让你走上人生巅峰, 才怪. 学会 ...

  7. echart 不同颜色（柱状图）

    var option = { tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containL ...

  8. css border-raidus 百分比和数值设置效果不同

    1.水平方向和竖直方向半径相等:设置数值和百分比的效果是一样的: 2.水平方向和竖直方向半径不相同:则效果不一致,具体参见:http://www.zhangxinxu.com/wordpress/20 ...

  9. 阿里P7级教你如何在Spring Boot应用程序中使用Redis

    在Spring Boot应用程序中使用Redis缓存的步骤: 1.要获得Redis连接,我们可以使用Lettuce或Jedis客户端库,Spring Boot 2.0启动程序spring-boot-s ...

  10. sql sever 查询用户所有的表和各个表数据量

    和oracle有区别, 需要关联表 SELECT A.NAME ,B.ROWS  FROM sysobjects  A JOIN sysindexes B ON A.id = B.id WHERE A ...