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. 会话技术——Cookies和Session详解

    会话技术 (一) 概述.用途以及分类 (1) 基本概述 概述:会话是浏览器和服务器之间的多次请求和响应 也就是说,从浏览器访问服务器开始,到访问服务器结束,浏览器关闭为止的这段时间内容产生的多次请求和 ...

  2. 防火墙firewalld报错：ERROR: Exception DBusException: org.freedesktop.DBus.Error.AccessDenied:...

    ERROR: Exception DBusException: org.freedesktop.DBus.Error.AccessDenied: Connection ":1.1985&qu ...

  3. VC++实现遍历指定文件夹

    VC++实现遍历指定文件夹,并进行深度遍历,一级,二级...最终列出该文件夹下所有文件全路径. #include "stdafx.h" #include <iostream& ...

  4. 跟我一起学编程—《Scratch编程》第21课：打地鼠

    能够熟练创建并使用变量 能够熟练使用“广播”和侦测指令 能够熟练绘制角色和背景造型 能够熟练使用循环.选择等程序指令 任务描述: 绘制有6个地洞的背景:绘制锤子的两个造型:绘制地鼠的造型. 游戏开始后 ...

  5. PyCryptodome安装使用方法

    PyCryptodome是PyCrypto的一个分支.基于PyCrypto2.6.1,多了以下特性: Authenticated encryption modes (GCM, CCM, EAX, SI ...

  6. vscode安装

    vscode是一个很好用而且开源的编辑器,支持多种编程语言,这里稍微总结一下使用,省的以后再安装时候再百度查 下载地址:https://code.visualstudio.com/,打开以后点击dow ...

  7. 如何禁止Chrome浏览器隐藏URL的WWW前缀

    如何禁止Chrome浏览器隐藏URL的WWW前缀 一.打开Chrome浏览器 二.在Chrome浏览器的地址栏中输入以下内容并回车: chrome://flags/#omnibox-ui-hide-s ...

  8. gitea configure

    gitea configure app.ini APP_NAME = Gitea: Git with a cup of tea RUN_USER = LSGX RUN_MODE = prod [oau ...

  9. C# 控制台日历 region分区编写思想

    已知道1900-1-1为星期一. 模块分区 //获取用户的正确输入并分别保存到变量year和month中 //声明一个用于保存空白和当月日期数的集合dates //遍历输出集合dates using ...

  10. MySQL Windows安装连接

    1.首先进入mysql的安装目录下的bin目录,例如我的是[C:\WINDOWS\System32\cmd.exe]   2.接着输入cmd,回车     3.在命令行中输入命令[mysql -hlo ...