基于JSON的级联列表实现

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于JSON的级联列表实现相关的知识，希望对你有一定的参考价值。

基于JSON的级联列表实现

1、采用JSON格式存储相应的数据；省份ProJSON，城市:cityJSON;

var proJSON={"1":"广东省","2":"湖北省"};
        var cityJSON={"1":{‘020‘:‘广州‘,‘0755‘:‘深圳‘,‘0756‘:‘珠海‘},‘2‘:{‘027‘:‘武汉‘,‘0710‘:‘襄樊‘,‘0715‘:‘赤壁‘}}

2.页面加载完成后需要显示省份的下拉框，因此要读取ProJSON，通过for in循环添加option。

window.onload=function(){
            var province=document.getElementById("province");
            for(temp in proJSON){
                province.add(new Option(proJSON[temp],temp));//参数分别是text，和value;text是用来显示出来的。
            }
        }

3.一旦省份下拉框触发onChange事件。

　　首先，还原2级菜单；

　　然后，获取选中的省份下标值；

　　最后，根据下标值寻找相应的子数据；

        function setCity(){
            // 只要触发了此事件,则二级菜单必须还原
            var city=document.getElementById(‘city‘);
            city.options.length=1;
            // 获取被选中省会的下标值
            var val=document.getElementById("province").value;
            console.info("cityJSON:" + cityJSON[val]);
            // 如果没有选择任何省会信息则直接返回
            if(!cityJSON[val]) return;
            // 通过选中的值获取二级菜单的json数据
            var sonJSON=cityJSON[val];
            for(temp in sonJSON){
                city.add(new Option(sonJSON[temp],temp));    
            }
        }

完整的代码实现：

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于数组级联列表</title>
    <script type="text/javascript">
        // JSON: 主要用于数据交换,其实JSON就是有格式的字符串
        var str=‘{"name":"demo","age":"18"}‘;
        console.info("当前类型为:" + typeof(str));
        // 把字符串转化为JSON格式
        var obj=JSON.parse(str);
        console.info("当前类型为:" + typeof(obj));
        // JSON输出访问的两种方式
        console.info(obj.name + "," + obj.age + "||" + obj[‘name‘] + "," + obj[‘age‘]);
        
        for(temp in obj){
            console.info(temp + ":" + obj[temp]);//json中下标就是字符串；    
        }
        
        str=JSON.stringify(obj);//就是说把原来是对象的类型转换成字符串类型;
        console.info("当前类型为:" + typeof(str));
        
        
        // 采用JSON格式来存储相应的数据和编码
        var proJSON={"1":"广东省","2":"湖北省"};
        var cityJSON={"1":{‘020‘:‘广州‘,‘0755‘:‘深圳‘,‘0756‘:‘珠海‘},‘2‘:{‘027‘:‘武汉‘,‘0710‘:‘襄樊‘,‘0715‘:‘赤壁‘}}
        
        window.onload=function(){
            var province=document.getElementById("province");
            for(temp in proJSON){
                province.add(new Option(proJSON[temp],temp));//参数分别是text，和value;text是用来显示出来的。
            }
        }
        
        function setCity(){
            // 只要触发了此事件,则二级菜单必须还原
            var city=document.getElementById(‘city‘);
            city.options.length=1;
            // 获取被选中省会的下标值
            var val=document.getElementById("province").value;
            console.info("cityJSON:" + cityJSON[val]);
            // 如果没有选择任何省会信息则直接返回
            if(!cityJSON[val]) return;
            // 通过选中的值获取二级菜单的json数据
            var sonJSON=cityJSON[val];
            for(temp in sonJSON){
                city.add(new Option(sonJSON[temp],temp));    
            }
        }
        
        
        
    </script>
</head>
<body>
   <!-- 数据的三种存储方式: 
            1: 数据库: 安全高、可以存储有结构但是耗资源
            2: properties: 存储非敏感数据,且Key value格式,省资源的
            3: XML: 存储非敏感数据,且支持有结构 目前一般用于配置文件
            4: 硬编码: 主要存储非敏感数据,且不改不的数据
   -->
   <select id="province" onChange="setCity()">
           <option value="">--选择省会--</option>
   </select>
   <select id="city">
           <option value="">--选择城市--</option>
   </select>
</body>
</html>
JSON实现级联列表

 

以上是关于基于JSON的级联列表实现的主要内容，如果未能解决你的问题，请参考以下文章

使用 JSON 结果填充下拉列表 - 使用 MVC3、JQuery、Ajax、JSON 的级联下拉

使用 Json 和 Jquery 的 Asp.net MVC4 中的级联下拉列表不填充

android房间数据库KOTLIN中的级联删除

基于element ui的级联选择器组件实现的分类后台接口

KendoUI - 使用 MVVM 和远程数据时的级联下拉列表

使用json 和jQuery制作级联dropdownlist