json数据二级联动

 <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.jsp

 $(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 'length' of undefined

             infoSource.append('<option  value="'+infoSourceSecondArrVal[k]+'" >'+infoSourceSecondArrVal[k]+'</option>')

         }

     });

 });

 //查询》列表显示

 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(),

                 ...

             };

             ...

         };

         $('#Table_queryList').bootstrapTable('destroy').bootstrapTable({

             ...

         })

     };

     ...

 };

zaiqing_shenhe.js

json数据二级联动的更多相关文章

中国省市区json数据三级联动
<label> <span>购买地址</span> <select name="PurchaseProvince" style=" ...
jquery 实现省市二级联动，附带完整的省市json数据（粘贴即用）
1.可以单独定义一个js,保存省市json数据. citydata = { "安徽": [ "合肥", "芜湖", "蚌埠&quo ...
利用Ajax和JSON实现关于查找省市名称的二级联动功能
功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...
jquery json实现二级动态联动
以下为代码!需要导入json架包 function getCity1(){ var unitid = document.getElementById('addformunitid').value; $ ...
JavaScript+Json写的二级联动
省市区的联动,相当常见我就不写这么大数据的了,先写个简单的试一试 <!DOCTYPE html> <html> <head> <title></ ...
根据参数显示类别（三级联动，需要JSON数据）
根据参数显示类别(三级联动,需要JSON数据) Scripts/Category.js 调用方法: $(function () { BindCategory(); //默认绑定文本框中的值 BindC ...
Jquery select 三级联动 (需要JSON数据)
Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...
javascript 省市区三级联动附： json数据
html: <label> <span>购买地址</span> <select name="PurchaseProvince" style ...
中国省市 Json 二级联动
Json数据: var cities = {'北京': ['北京'], '广东': ['广州', '深圳', '珠海', '汕头', '韶关', '佛山', '江门', '湛江', '茂名', '肇庆 ...

随机推荐

vue脚手架构
我们是用Eclipse开发的,所以用vue开始时,要进行代理,不然访问不到服务器,所以就需要配置一下 dev context 里面写的是代理的接口,就是以这些接口开头的,如果没有就往里写一下,pro ...
Thread,ThreadPool,Task, 到async await 的基本使用方法和理解
很久以前的一个面试场景: 面试官:说说你对JavaScript闭包的理解吧? 我:嗯,平时都是前端工程师在写JS,我们一般只管写后端代码. 面试官:你是后端程序员啊,好吧,那问问你多线程编程的问题吧. ...
SpringBoot之oauth2.0学习之服务端配置快速上手
现在第三方登录的例子数见不鲜.其实在这种示例当中,oauth2.0是使用比较多的一种授权登录的标准.oauth2.0也是从oauth1.0升级过来的.那么关于oauth2.0相关的概念及其原理,大家可 ...
python学习笔记02--列表和元组
一.简介数据结构是通过某种方式组织在一起的数据元素的集合. 序列是python中最基本的数据结构,python中包含6种内建的序列,分别是列表.元组.字符串.Unicode字符串.buffer对象和 ...
[转]bootstrapValidator.js 做表单验证
本文转自:https://www.cnblogs.com/nele/p/5493414.html 作者:@nele本文为作者原创,转载请注明出处:https://www.cnblogs.com/nel ...
Java基础——Oracle（二）
一.Oracle 中的几个服务 1.OracleDBConsoleorcl 进程:nmesrvc.exe oem控制台服务进程,dba用.Oracle Enterprise Manager(Oracl ...
Oracle索引失效原因及解决方法
一.Oracle索引失效的原因 1使用否定关键字 !=, <> ,not in,not exist select * fromdrama where id <> 1,Mysql ...
Maven远程仓库的各种配置
1.远程仓库的配置在平时的开发中,我们往往不会使用默认的中央仓库,默认的中央仓库访问的速度比较慢,访问的人或许很多,有时候也无法满足我们项目的需求,可能项目需要的某些构件中央仓库中是没有的,而在其他 ...
Python全栈学习_day001作业
Day1作业及默写 1.简述变量命名规范 1. 必须以字母.数字.下划线命名,且不能以数字开头 2. 不能是python的关键字 3. 不能以中文或者拼音作为变量名 4. 命名格式推荐以驼峰式或者下划 ...
canvas-color的几种设置
#ffff #642 = #664422 rgb(255,128,0) rgba(100,100,100,0.8) hsl(20,62%,28%) hsla(40,82%,33%,0.6) red

json数据 二级联动

json数据 二级联动的更多相关文章

随机推荐

热门专题

json数据二级联动

json数据二级联动的更多相关文章