zoukankan      html  css  js  c++  java
  • 级联展示二——展示从js文件中读取的二维数据

      数据是以二维数组格式存储在js文件中的。(这是用来展示较多的数据,比如省市级的三级联动。我这里只是简单的测试一下)。

      从数据库查询并展示数据在博客——级联展示一中

      data.js/datajs.js都是放在js文件夹下的。

     datajs.js

    function init(obj_1,val_1,obj_2,val_2){
        
        //定义默认数据
        var ar = ["请选则业务大类","请选择具体分类"];
        var pindex=0;
        //var cindex=0;
        
        //初始化
        $("<option value=''>"+ar[0]+"</option>").appendTo($("#"+obj_1));
        $("<option value=''>"+ar[1]+"</option>").appendTo($("#"+obj_2));
        
        
        //初始化obj_1
        for (i=0;i<mp.length;i++){
                if (mp[i]==val_1){
                    pindex = i;
                    $("<option >"+mp[i]+"</option>").appendTo($("#"+obj_1));
                }else{
                    $("<option>"+mp[i]+"</option>").appendTo($("#"+obj_1));
                    }
            }
    
        if (pindex!=0){
                for (n=1;n<mc[pindex].length+1;n++){
                        if (mc[pindex][n-1]==val_2){
                            cindex = n;
                            $("<option >"+mc[pindex][n-1]+"</option>").appendTo($("#"+obj_2));
                        }else{                        
                            $("<option>"+mc[pindex][n-1]+"</option>").appendTo($("#"+obj_2));
                        }            
                    }        
            }
    
        
            
            
        //响应obj_1的change事件    
        $("#"+obj_1).change(function(){
            //获取索引
            pindex = $("#"+obj_1).get(0).selectedIndex;
            //清空c和h
            $("#"+obj_2).empty();
            //重新给c填充内容
            $("<option>"+ar[1]+"</option>").appendTo($("#"+obj_2));
                if (pindex!=0){
                    for (k=0;k<mc[pindex-1].length;k++){
                        $("<option>"+mc[pindex-1][k]+"</option>").appendTo($("#"+obj_2));
                    }
                }    
            //清空h
            
        });
        
        
        
    }

    data.js

    var mp =['一类产业','二类产业','三类产业','四类产业'];
    /********** 市级数据 **********/
    var mc = [
    ['0100传统产业','0101钢铁','0102装备制造','0103建材','0104能源','0105石油化工','0106食品','0107纺织','01其他'],
    ['0200战略性新兴产业','0201节能环保','0202新一代信息技术','0203生物产业','0204新能源','0205新能源汽车','0206高端装备制造业','0207新材料'],
    ['0300现代农业','0301农产品加工','0302农业装备','0303集约化种植'],
    ['04社会发展及民生','0401重大疾病','0402环境保护','0403资源','0404生态修复'],
    ];

    前台页面(在加载页面的时候利用script中的init()函数,加载存放在datajs.js中的数据,具体初始化是在data.js中执行的):

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
       <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
      <script type="text/javascript"  src="js/data.js"></script>
    <script type="text/javascript"  src="js/datajs.js"></script>
    </head>
    <body>
    <script type="text/javascript">
                $(document).ready(function(){
                    init("province","","city","");
                                    
                                    
                                    
                });
        </script>
        
    <form action="MessageServlet?method=Test"  method="post">
            <select id="province" class="zzjg_sel1"  name="province" ></select>
                    <select id="city"   class="zzjg_sel1" name="city" ></select>
            <input value="提交" Type="submit">
             </form>
                        
    
    </body>
    </html>
  • 相关阅读:
    POJ 1466 最大独立点集
    POJ 3159 差分约束
    POJ 3411 DFS
    POJ 2665 模拟,,
    POJ 3134 Power Calculus ID-DFS +剪枝
    POJ 1543 暴搜
    455. Assign Cookies
    715. Range Module
    530. Minimum Absolute Difference in BST
    493. Reverse Pairs(BST, BIT, MergeSort)
  • 原文地址:https://www.cnblogs.com/moxihuishou/p/13905053.html
Copyright © 2011-2022 走看看