利用combobox联动本地JSON数据

最新推荐文章于 2021-12-30 11:30:38 发布

藏何

最新推荐文章于 2021-12-30 11:30:38 发布

阅读量655

点赞数

分类专栏： EasyUI

本文链接：https://blog.csdn.net/u013533810/article/details/37625361

版权

EasyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="PrisonPM.MM.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../Scripts/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../Scripts/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../Scripts/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../Scripts/json.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        var MAS_PART_CLASS_ALL;//全局数据变量
        $(function () {
            //MAS_PART_CLASS_ALL的Json数据格式
            //var MAS_PART_CLASS_ALL = '["PARTCLASSKEY":1,"PARTCLASSCNNAME":"ss","children":[{"PARTCLASSKEY":10,"PARTCLASSCNNAME":"sss222","children":[{"PARTCLASSKEY":666,"PARTCLASSCNNAME":"67676"}]}]]';
            $.ajax({
                url: '../PublicData/MAS_PART_CLASS_ALL.aspx',//加载本地的JSON数据
                type: "get",
                dataType: "json",
                success: function (data) {
                    MAS_PART_CLASS_ALL = data;//取出数据放入全局数据变量中
                    $('#one').combobox({ data: data });//加载第一级别类
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    return;
                }
            });

            //第一级别类加载、并设置第二级别联动数据
            $('#one').combobox({
                //url: '../PublicData/MAS_PART_CLASS_ALL.aspx',
                valueField: 'PARTCLASSKEY',
                textField: 'PARTCLASSCNNAME',
                onChange: function (newValue, oldValue) {
                    var MAS_PART_CLASS_TWO = [];
                    for (var e in MAS_PART_CLASS_ALL) {//循环第一级别数据
                        if (MAS_PART_CLASS_ALL[e].PARTCLASSKEY == newValue) {
                            for (var p in MAS_PART_CLASS_ALL[e].children) {//循环取出第二级别数据
                                MAS_PART_CLASS_TWO.push({ "PARTCLASSKEY": MAS_PART_CLASS_ALL[e].children[p].PARTCLASSKEY, "PARTCLASSCNNAME": MAS_PART_CLASS_ALL[e].children[p].PARTCLASSCNNAME });
                            }
                            break;
                        }
                    }
                    $('#two').combobox("clear").combobox({ data: MAS_PART_CLASS_TWO });
                    $('#three').combobox("clear");
                }

            });

            //第二级别类加载、并设置第三级别联动数据
            $('#two').combobox({
                valueField: 'PARTCLASSKEY',
                textField: 'PARTCLASSCNNAME',
                onChange: function (newValue, oldValue) {
                    var MAS_PART_CLASS_THREE = [];
                    for (var e in MAS_PART_CLASS_ALL) {//循环第一级别数据
                        if (MAS_PART_CLASS_ALL[e].PARTCLASSKEY == $('#one').combobox("getValue")) {
                            for (var p in MAS_PART_CLASS_ALL[e].children) {//循环第二级别数据
                                if (MAS_PART_CLASS_ALL[e].children[p].PARTCLASSKEY == newValue) {
                                    for (var cc in MAS_PART_CLASS_ALL[e].children[p].children) {//循环取出第三级别数据
                                        MAS_PART_CLASS_THREE.push({ "PARTCLASSKEY": MAS_PART_CLASS_ALL[e].children[p].children[cc].PARTCLASSKEY, "PARTCLASSCNNAME": MAS_PART_CLASS_ALL[e].children[p].children[cc].PARTCLASSCNNAME });
                                    }
                                }
                            }
                        }
                    }
                    $('#three').combobox("clear").combobox({ data: MAS_PART_CLASS_THREE });
                }
            });

            //加载第三级别类
            $('#three').combobox({
                valueField: 'PARTCLASSKEY',
                textField: 'PARTCLASSCNNAME'
            });
        });
    </script>
</head>
<body>
    <input id="one" />
    <input id="two" />
    <input id="three" />
</body>
</html>

藏何

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用combobox联动本地JSON数据

var MAS_PART_CLASS_ALL; $(function () { //MAS_PART_CLASS_ALL的Json数据格式 //var MAS_PART_CLASS_ALL = '["PARTCLASSKEY":1,"PARTCLASSCNNAME":"ss","children":[{"PARTCLASSKEY":1
复制链接

扫一扫