首页 > 代码库 > 基于JSON的级联列表实现
基于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的级联列表实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。