经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JSJS库框架 » jQuery » 查看文章
json数据 二级联动
来源：cnblogs　　作者：养成的技术宅　　时间：2018/9/25 20:07:30　　对本文有异议 

  1.  1 <head>
  2.  2     <link href="static/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
  3.  3     <link href="static/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
  4.  4     <link rel="stylesheet" href="static/bootstrap-select/bootstrap-select.min.css" />
  5.  5 </head>
  6.  6 <body>
  7.  7     <div class="panel-body" style="padding-bottom:0px;">
  8.  8         <div class="panel panel-default" style="margin:10px;">
  9.  9             <div class="panel-heading">
  10. 10                 <span>查询条件</span>
  11. 11             </div>
  12. 12             <input id="query_dataSource" type="hidden"   value="${dataSource}">
  13. 13             <input name="id"             type="hidden"   value="${id}">
  14. 14             <div class="panel-body">
  15. 15                                 <!-- form表单 -->
  16. 16                 <form class="form-horizontal" id="formSearch">
  17. 17                     <div class="form-group" style="margin:0px">
  18. 18                         <!-- 一级选择框 -->
  19. 19                         <div class="col-sm-2" style="width:110px;">
  20. 20                             <label class="control-label" for="txt_search_departmentname">数据来源</label>
  21. 21                             <select class="form-control" id="dataSource">
  22. 22                                 <option code="" value="" selected="selected">全部</option>
  23. 23                                 <c:forEach var="dataSource" items="${dataSources }">
  24. 24                                     <c:choose>
  25. 25                                         <c:when test="${obj.dataSources == dataSource.dataSourceName}">
  26. 26                                             <option code="${dataSource.dataSourceCode}" value="${dataSource.dataSourceName }" selected="selected">${dataSource.dataSourceName}</option>
  27. 27                                         </c:when>
  28. 28                                         <c:otherwise>
  29. 29                                             <option code="${dataSource.dataSourceCode}" value="${dataSource.dataSourceName }">${dataSource.dataSourceName}</option>
  30. 30                                         </c:otherwise>
  31. 31                                     </c:choose>
  32. 32                                 </c:forEach>
  33. 33                             </select>
  34. 34                         </div>
  35. 35                         <!-- 二级选择框 -->
  36. 36                         <div class="col-sm-2" style="width:110px;">
  37. 37                             <label class="control-label" for="txt_search_departmentname">信息来源</label>
  38. 38                             <select class="form-control" id="infoSource">
  39. 39                               <option value="" selected="selected">全部</option>
  40. 40                             </select>
  41. 41                         </div>
  42. 42                         <div class="col-sm-1" style="text-align:left;">
  43. 43                             <button class="btn btn-primary" id="btn_query" type="button" style="margin-top:29px">查询</button>
  44. 44                         </div>
  45. 45                     </div>
  46. 46                 </form>
  47. 47             </div>
  48. 48         </div>
  49. 49         <!-- 查询结果的列表显示位置 -->
  50. 50         <div class=table-responsive">
  51. 51             <table id="Table_queryList" class="table text-nowrap"></table>
  52. 52         </div>
  53. 53     </div>
  54. 54     <script src="static/js/jquery-1.10.1.min.js"></script>
  55. 55     <script src="static/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
  56. 56     <script src="static/bootstrap-table/bootstrap-table.js"></script>
  57. 57         <script src="static/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
  58. 58     <script src="static/bootstrap-select/bootstrap-select.js"></script>
  59. 59     <script src="static/jsUtil/jquery.form.js"></script>
  60. 60     <script src="static/js/zaiqing_shenhe.js"></script>
  61. 61 </body>
zaiqing_shenhe.jsp
  1.  1 $(function () {    
  2.  2     //二级联动    绑定事件  ：数据来源》信息来源
  3.  3     $("#dataSource").change(function(){    
  4.  4         var infoSourceArr=[
  5.  5                             {
  6.  6                                 "全部":[
  7.  7                                     "灾害大典",
  8.  8                                     "灾情普查",
  9.  9                                     "灾情直报",
  10. 10                                     "网络媒体",
  11. 11                                     "微博",
  12. 12                                     "墨迹天气",
  13. 13                                     "河北天气",
  14. 14                                     "其他"
  15. 15                                 ]
  16. 16                             },
  17. 17                             {
  18. 18                                 "互联网":[
  19. 19                                     "网络媒体",
  20. 20                                     "微博",
  21. 21                                     "墨迹天气",
  22. 22                                     "河北天气",
  23. 23                                     "其他"
  24. 24                                 ]
  25. 25                             },
  26. 26                             {
  27. 27                                 "气象部门":[
  28. 28                                     "灾害大典",
  29. 29                                     "灾情普查",
  30. 30                                     "灾情直报",
  31. 31                                     "其他"
  32. 32                                 ]
  33. 33                             }
  34. 34                         ]
  35. 35         var dataSourceVal=$("#dataSource").find("option:selected").val();//一级下拉框，选中值
  36. 36         dataSourceVal  = dataSourceVal.replace( /^\s+|\s+$/g, "" );//去除字符中 空格
  37. 37         var infoSource=$("#infoSource");
  38. 38         for(var i in infoSourceArr){
  39. 39             for(var j in infoSourceArr[i]){
  40. 40                 j  = j.replace( /^\s+|\s+$/g, "" );
  41. 41                 if(dataSourceVal==j){
  42. 42                     var infoSourceSecondArrVal=infoSourceArr[i][j];
  43. 43                 }
  44. 44             }    
  45. 45         }
  46. 46         document.getElementById("infoSource").options.length = 1; //清空select标签中option选项=0,只留一项=1
  47. 47         //根据一级下拉框选中值，加载相应的二级下拉框选项
  48. 48         for (var k in infoSourceSecondArrVal){//(var k=0;k<infoSourceSecondArrVal.length;k++)则浏览器调试出错：Uncaught TypeError: Cannot read property 'length' of undefined
  49. 49             infoSource.append('<option  value="'+infoSourceSecondArrVal[k]+'" >'+infoSourceSecondArrVal[k]+'</option>')
  50. 50         }
  51. 51     });
  52. 52 });
  53. 53  
  54. 54  
  55. 55 //查询》列表显示
  56. 56 var TableInit = function () {
  57. 57     ...
  58. 58     //初始化Table
  59. 59     oTableInit.Init = function (pageNumber) {
  60. 60         ...
  61. 61                 //得到查询的参数
  62. 62         oTableInit.queryParams = function (params) {
  63. 63             var temp = {   //这里的键的名字和控制器Controller里的变量名必须一致
  64. 64                 ...
  65. 65                 dataSource: $("#dataSource").find("option:selected").val(),
  66. 66                 infoSource: $("#infoSource").find("option:selected").val(),
  67. 67                 ...
  68. 68             };
  69. 69             ...
  70. 70         };
  71. 71         $('#Table_queryList').bootstrapTable('destroy').bootstrapTable({
  72. 72             ...
  73. 73         })
  74. 74     };
  75. 75     ...
  76. 76 };
zaiqing_shenhe.js
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号