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

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

zaiqing_shenhe.jsp

    
    
    


    

        

            

                查询条件
            
            
            
            

                                
                

                    

                        
                        

                            数据来源
                            
                                全部
                                
                                    
                                        
                                            ${dataSource.dataSourceName}
                                        
                                        
                                            ${dataSource.dataSourceName}
                                        
                                    
                                
                            
                        
                        
                        

                            信息来源
                            
                              全部
                            
                        
                        

                            查询
                        
                    
                
            
        
        
        

            
        
    
    
    
    
        
    
    
    

zaiqing_shenhe.js

装修公司企业网站源码2.0

装修公司源码，采用DIV+CSS布局，首页顶部采用了超大宽屏banner焦点图切换，带伸缩功能的导航条。首页信息展示量大，有利于SEO优化，首页版块包括，导航，焦点图切换，案例，行业动态，装修经验，装修知识。源码支持伪静态，后台开启即可，服务器必须支持rewrite功能，否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改，删除，可以支持，视频，图片，附件上传。

下载

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