登录  /  注册
首页 > web前端 > js教程 > 正文

json数据实现二级联动的实例代码

不言
发布: 2018-09-17 17:44:22
原创
1613人浏览过

本篇文章给大家带来的内容是关于json数据实现二级联动的实例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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({
            ...
        })
    };
    ...
};
登录后复制

以上就是json数据实现二级联动的实例代码的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号