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. MySQL（六） 索引

    索引与优化 1.选择索引的数据类型 MySQL支持很多数据类型,选择合适的数据类型存储数据对性能有很大的影响.通常来说,可以遵循以下一些指导原则: (1)越小的数据类型通常更好:越小的数据类型通常在磁 ...

  2. go 通过赋值给 _ 来忽略序号和值

    go 语言中 只要想忽略的值都需要用 下划线 _ 来代替 package main import "fmt" func main() {     pow := make([]int ...

  3. （十二）easyUI之表单和验证完成登录页面

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. 关于hashcode 和 equals 的内容总结

    第一:equals() 的作用是 表示其他对象是否“等于”这个对象. 在Object源码里面    equals的作用等价于 ==   即 用来比较俩个对象的内存地址是否相同 public boole ...

  5. iis 虚拟目录 文件服务器

    需求 多节点站点部署时,上传文件地址统一 调整步骤如下 建立文件服务器 共享目录 设置账号密码 各服务器建账号 密码 需与文件服务器账号密码一致 调整 web.config 在<system.w ...

  6. .net Core CLR

    .net Core CLR是开源的.大部分文件是C++写成.这样他就可以编译后再不同的平台运行. https://github.com/dotnet/coreclr

  7. 一步一步写News App(一)

    一. 新建一个安卓工程,安卓版本全部选2.3.3 二.第一步,添加一个tabhost控件 在MainActivity中声明TabHost tabHost; 然后新建一个private void ini ...

  8. Python练习_集合和深浅拷贝_day7

    1. 1.作业 1.把列表中所有姓周的人的信息删掉(升级题:此题有坑, 请慎重): lst = ['周老二', '周星星', '麻花藤', '周扒皮'] 结果: lst = ['麻花藤'] 2.车牌区 ...

  9. Lua 可变参数 ... 的一点测试

    function test( ... ) if (...) then dibug("has ...") else dibug("no ...") end for ...

  10. ios编程时常见问题总结

    (1)在UIViewController里面使用了timer,会使得controller被retain,因此在viewdisapper时应将timer置为nil,否则controller的deallo ...