首页 > 其他分享> > 级联展示二——展示从js文件中读取的二维数据

级联展示二——展示从js文件中读取的二维数据

2020-10-31 04:31:27 作者：互联网

　　数据是以二维数组格式存储在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>

标签：级联,obj,mc,展示,js,pindex,appendTo,var
来源： https://www.cnblogs.com/moxihuishou/p/13905053.html