Heim >Web-Frontend >js-Tutorial >Beispielcode zur Realisierung einer sekundären Verknüpfung mithilfe von JSON-Daten
Beispielcode zur Realisierung einer sekundären Verknüpfung mithilfe von JSON-Daten
- 不言Original
- 2018-09-17 17:44:221789Durchsuche
Was dieser Artikel Ihnen bringt, ist der Beispielcode für die Realisierung der sekundären Verknüpfung von JSON-Daten. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.
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({
...
})
};
...
};Das obige ist der detaillierte Inhalt vonBeispielcode zur Realisierung einer sekundären Verknüpfung mithilfe von JSON-Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vertiefendes Verständnis der vier Schritte der Ajax-DatenanforderungNächster Artikel：Vertiefendes Verständnis der vier Schritte der Ajax-Datenanforderung
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse