Home >Web Front-end >JS Tutorial >Example code for realizing secondary linkage using json data

Example code for realizing secondary linkage using json data

不言Original: 2018-09-17 17:44:221787browse

The content of this article is about the example code for realizing secondary linkage of json data. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

zaiqing_shenhe.jsp

<head>
    <link href="static/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
    <link href="static/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <link rel="stylesheet" href="static/bootstrap-select/bootstrap-select.min.css" />
</head>
<body>
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default" style="margin:10px;">
            <div class="panel-heading">
                <span>查询条件</span>
            </div>
            <input id="query_dataSource" type="hidden"   value="${dataSource}">
            <input name="id"             type="hidden"   value="${id}">
            <div class="panel-body">
                                <!-- form表单 -->
                <form class="form-horizontal" id="formSearch">
                    <div class="form-group" style="margin:0px">
                        <!-- 一级选择框 -->
                        <div class="col-sm-2" style="width:110px;">
                            <label class="control-label" for="txt_search_departmentname">数据来源</label>
                            <select class="form-control" id="dataSource">
                                <option code="" value="" selected="selected">全部</option>
                                <c:forEach var="dataSource" items="${dataSources }">
                                    <c:choose>
                                        <c:when test="${obj.dataSources == dataSource.dataSourceName}">
                                            <option code="${dataSource.dataSourceCode}" value="${dataSource.dataSourceName }" selected="selected">${dataSource.dataSourceName}</option>
                                        </c:when>
                                        <c:otherwise>
                                            <option code="${dataSource.dataSourceCode}" value="${dataSource.dataSourceName }">${dataSource.dataSourceName}</option>
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                            </select>
                        </div>
                        <!-- 二级选择框 -->
                        <div class="col-sm-2" style="width:110px;">
                            <label class="control-label" for="txt_search_departmentname">信息来源</label>
                            <select class="form-control" id="infoSource">
                              <option value="" selected="selected">全部</option>
                            </select>
                        </div>
                        <div class="col-sm-1" style="text-align:left;">
                            <button class="btn btn-primary" id="btn_query" type="button" style="margin-top:29px">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- 查询结果的列表显示位置 -->
        <div class=table-responsive">
            <table id="Table_queryList" class="table text-nowrap"></table>
        </div>
    </div>
    <script src="static/js/jquery-1.10.1.min.js"></script>
    <script src="static/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
    <script src="static/bootstrap-table/bootstrap-table.js"></script>
        <script src="static/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="static/bootstrap-select/bootstrap-select.js"></script>
    <script src="static/jsUtil/jquery.form.js"></script>
    <script src="static/js/zaiqing_shenhe.js"></script>
</body>

##zaiqing_shenhe.js

$(function () {    
    //二级联动    绑定事件  ：数据来源》信息来源
    $("#dataSource").change(function(){    
        var infoSourceArr=[
                            {
                                "全部":[
                                    "灾害大典",
                                    "灾情普查",
                                    "灾情直报",
                                    "网络媒体",
                                    "微博",
                                    "墨迹天气",
                                    "河北天气",
                                    "其他"
                                ]
                            },
                            {
                                "互联网":[
                                    "网络媒体",
                                    "微博",
                                    "墨迹天气",
                                    "河北天气",
                                    "其他"
                                ]
                            },
                            {
                                "气象部门":[
                                    "灾害大典",
                                    "灾情普查",
                                    "灾情直报",
                                    "其他"
                                ]
                            }
                        ]
        var dataSourceVal=$("#dataSource").find("option:selected").val();//一级下拉框，选中值
        dataSourceVal  = dataSourceVal.replace( /^\s+|\s+$/g, "" );//去除字符中 空格
        var infoSource=$("#infoSource");
        for(var i in infoSourceArr){
            for(var j in infoSourceArr[i]){
                j  = j.replace( /^\s+|\s+$/g, "" );
                if(dataSourceVal==j){
                    var infoSourceSecondArrVal=infoSourceArr[i][j];
                }
            }    
        }
        document.getElementById("infoSource").options.length = 1; //清空select标签中option选项=0,只留一项=1
        //根据一级下拉框选中值，加载相应的二级下拉框选项
        for (var k in infoSourceSecondArrVal){//(var k=0;k<infoSourceSecondArrVal.length;k++)则浏览器调试出错：Uncaught TypeError: Cannot read property &#39;length&#39; of undefined
            infoSource.append(&#39;<option  value="&#39;+infoSourceSecondArrVal[k]+&#39;" >&#39;+infoSourceSecondArrVal[k]+&#39;</option>&#39;)
        }
    });
});
 
 
//查询》列表显示
var TableInit = function () {
    ...
    //初始化Table
    oTableInit.Init = function (pageNumber) {
        ...
                //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器Controller里的变量名必须一致
                ...
                dataSource: $("#dataSource").find("option:selected").val(),
                infoSource: $("#infoSource").find("option:selected").val(),
                ...
            };
            ...
        };
        $(&#39;#Table_queryList&#39;).bootstrapTable(&#39;destroy&#39;).bootstrapTable({
            ...
        })
    };
    ...
};

The above is the detailed content of Example code for realizing secondary linkage using json data. For more information, please follow other related articles on the PHP Chinese website!

json JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：In-depth understanding of the four steps of ajax data requestNext article：In-depth understanding of the four steps of ajax data request

See more

Example code for realizing secondary linkage using json data

Related articles