<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数据 二级联动的更多相关文章

  1. 中国省市区json数据 三级联动

    <label> <span>购买地址</span> <select name="PurchaseProvince" style=" ...

  2. jquery 实现省市二级联动,附带完整的省市json数据 (粘贴即用)

    1.可以单独定义一个js,保存省市json数据. citydata = { "安徽": [ "合肥", "芜湖", "蚌埠&quo ...

  3. 利用Ajax和JSON实现关于查找省市名称的二级联动功能

    功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...

  4. jquery json实现二级动态联动

    以下为代码!需要导入json架包 function getCity1(){ var unitid = document.getElementById('addformunitid').value; $ ...

  5. JavaScript+Json写的二级联动

    省市区的联动,相当常见 我就不写这么大数据的了,先写个简单的试一试 <!DOCTYPE html> <html> <head> <title></ ...

  6. 根据参数显示类别(三级联动,需要JSON数据)

    根据参数显示类别(三级联动,需要JSON数据) Scripts/Category.js 调用方法: $(function () { BindCategory(); //默认绑定文本框中的值 BindC ...

  7. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

  8. javascript 省市区三级联动 附: json数据

    html: <label> <span>购买地址</span> <select name="PurchaseProvince" style ...

  9. 中国省市 Json 二级联动

    Json数据: var cities = {'北京': ['北京'], '广东': ['广州', '深圳', '珠海', '汕头', '韶关', '佛山', '江门', '湛江', '茂名', '肇庆 ...

随机推荐

  1. 【sping揭秘】22、事务管理

    有关事务的楔子 什么是事务??? 事务就是以可控的方式对数据资源进行访问的一组操作. 事务本身持有四个限定属性 原子性,一致性,隔离性,持久性 事务家族 Resource Manager  RM,负责 ...

  2. 测试工具之RobotFramework安装

    Robot Framework很多公司再用,图形化界面,类表格填写关键字和参数,几乎不需要编码知识,上手很快 最近看到某满公司使用的就是这个工具,特地看了下,确实很简单,对于初入测试行业的人来说是个很 ...

  3. Linux驱动:内核等待队列

    在Linux中, 一个等待队列由一个"等待队列头"来管理,等待队列是双向链表结构. 应用场合:将等待同一资源的进程挂在同一个等待队列中. 数据结构 在include/linux/w ...

  4. 如何在GooglePlay上面发布应用

    上传和发布应用 注册开发者帐户后,您便可使用 Google Play 开发者控制台将应用上传到 Google Play. 访问 Google Play 开发者控制台. 点击屏幕顶部附近的添加新用户. ...

  5. 全网最详细的MyEclipse里如何正确新建普通的Java web项目并发布到Tomcat上运行成功【博主强烈推荐】(图文详解)

    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 如果是在eclipse里,则是File -> new ->  ...

  6. 829. 连续整数求和-leetcode

    题目:给定一个正整数 N,试求有多少组连续正整数满足所有数字之和为 N? 示例 1: 输入: 5 输出: 2 解释: 5 = 5 = 2 + 3,共有两组连续整数([5],[2,3])求和后为 5. ...

  7. Everything(一款用于检索硬盘文件的工具)

    有时候文件夹一多,找不到文件,忘记放哪个盘符怎么办? Everything就能帮你解决,比电脑自带的快多啦,官网在此:http://www.voidtools.com/ (也不大,就几M,没有特别的安 ...

  8. JavaWeb学习 (二十六)————监听器(Listener)学习(二)

    一.监听域对象中属性的变更的监听器 域对象中属性的变更的事件监听器就是用来监听 ServletContext, HttpSession, HttpServletRequest 这三个对象中的属性变更信 ...

  9. Redis之集群环境搭建

    前面文章介绍了Redis的主从复制,虽然该模式能够在一定程度上提高系统的稳定性,但是在数据访问量比较大的情况下,单个master应付起来还是比较吃力的,这时我们可以考虑将redis集群部署,本文就来重 ...

  10. Ansible系列(四):playbook应用和roles自动化批量安装示例

    Ansible系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html playbook是ansible实现批量自动化最重要的手段.在其中可以使用变 ...