json数据 二级联动

最新推荐文章于 2023-06-19 09:20:03 发布
最新推荐文章于 2023-06-19 09:20:03 发布
阅读量1.3k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LaOngDaoxing/article/details/82425079
版权

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 '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({
			...
		})
	};
	...
};

 

LaOngDaoxing
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
二级联动json
08-17
这个插件网上很多，但是没有一个具体介绍这款插件的使用和修改，比如，我这次做的下拉联动，select下的<option></option>是动态生成的，你如果有这样的需求这是不错的选择
中国城市二级联动json数据
10-16
中国城市二级联动数据展示(json形式)
json数据 二级联动
weixin_30596023的博客
09-14 369
1 <head> 2 <link href="static/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" /> 3 <link href="static/bootstrap-table/bootstrap-table.css" rel="styleshe...
json数据的二级联动
wylfll的博客
04-27 2340
var jsondata={"elements":[{"key":"2005","value":["01","02","03","05","04"]},{"key":"2006","value":["01","02","03"]}]}; var jsonobjct=eval(jsondata); var json=jsonobjct.elements; function init
java二级联动json数据,jquery+json实现数据二级联动的方法
weixin_29485605的博客
03-10 209
本文实例讲述了jquery+json实现数据二级联动的方法。分享给大家供大家参考，具体如下：function GetCityInfo1(){$("#ddlCITY1").empty();//$("#ddlCOUNTY").empty();var strId = $("#ddlPROVINCE1").attr("value");$('#HiddenPro').val(strId);$.get(".....
省市二级联动数据
02-25
省市二级联动数据
省市编码二级联动json
04-15
省市编码二级联动json
JavaWeb通过ajax、json实现省市二级联动
04-09
在JavaWeb开发中，省市二级联动是一项常见的功能，它允许用户在选择省份后，自动加载出对应的市区选项。这项功能的实现通常涉及到前端JavaScript技术，如AJAX（Asynchronous JavaScript and XML）和JSON（JavaScript...
三级联动用到的json数据
07-13
为了实现三级联动，前端开发者会监听用户在第一级（省份）选择框中的选择事件，然后通过JSON数据获取对应的第二级（城市）数据，并填充到城市选择框。同样的逻辑应用于城市到区县的选择。这通常涉及到JavaScript或者...
城市级联选择--二级联动json数据
最新发布
Rilan_Li的博客
06-19 817
vant 城市级联选择器（二级联动）json数据
全国地区二级联动和三级联动(json数据和xml数据)
01-05
全国地区信息的json数据和xml数据。json数据提供二个级别城市，xml数据提供了三个级别城市。适合网站表单提交的城市选择。
中国一二级省市JSON格式（2017年7月20号后数据）
07-26
在开发过程中经常要使用到一二级省市列表，之前都是在网上找前人做好的JSON文件使用，但是使用后发现部分数据过时，要进行修改却难以查全，比如现在北京没了崇文区宣武区，上海没了闸北区卢湾区南汇区等等。博主根据2017年7月国家统计局官方网站上的数据做了该JSON，里面包含中国一级省市和其下的（一级省的）地级市，洲，盟，直辖县级市，直辖县以及（一级直辖市的）区，县；地级市再往下的市县便没有再细分了，小伙伴们可以根据自己的业务需求修改使用。id为区域编号（即邮政编码）
使用Json实现省市二级联动
wangyanming123的博客
09-26 6619
1。导包： xpp3_min-1.1.4c.jar和xstream-1.3.1.jar 2。06provinceCity.html文件：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>省市二级联动：返回的是XML</title> <meta http-equ
用json文件实现城市的二级联动
b68741879732809的博客
06-29 215
第一次接触的二级联动是学习php的时候用ajax请求实现城市之间的二级联动; 后来项目接触到这中需求之后,发现我们的后台是Java(新手对Java的后台一窍不通); 所以就想到了用json的来实现,由于项目时间紧,任务重,根本不给我思考的机会(当时写了个json文件是报错的), 那么问题来了;该怎么办呢;突然灵机一动,用数组啊,一级将行政区写死在页面上,二级用change事件查找对...
ajax实现的二级联动_读取的是json格式数据
guoliang1992
09-14 1168
jsp页面： ====请选择==== ====请选择==== js代码： /**  * 项目思路：在页面加载的时候初始化第一个选项，   2：当第一个下拉列表发生改变是触动change函数来改变第二个下拉列表的内容   2.1：读取xml文件的内容   2.2：判断用户选中的option的value值   2.3：遍历xml文件找到与用户
jquery json实现二级动态联动
selfimpl
08-05 1561
以下为代码！需要导入json架包 js部分 function getCity1(){ var unitid = document.getElementById('addformunitid').value; $.getJSON("../unit/getcity.do?unitid="+unitid, "", function(response){ //$
json实现部门二级联动
飞雪---晨
07-30 1117
function getEmp(){            var deparementids =$("#deparementid").val();             $.ajax({    url: '/contractAction_departmentuser.action?deparementids='+deparementids,      type: "post",
php解析二级json,PHP Json 解析
weixin_34194499的博客
03-25 606
2010-03-27对于JSON(JavaScript Object Notation)大家应该不陌生，它是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。JSON采用完全独立于语言的文本格式，但是也使用...
JSON实现市区二级联动
qq_33343480的博客
09-13 702
1-----Option-------------------------------------------------------------------------------------------------- package net.yaorange.entity; public class Option { private String option_name; pr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值