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

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

zaiqing_shenhe.jsp

查询条件

数据来源

全部

${dataSource.dataSourceName}

${dataSource.dataSourceName}

信息来源

全部

查询

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

infoSource.append(''+infoSourceSecondArrVal[k]+'')

}

});

});

//查询》列表显示

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({

...

})

};

...

};