json数组及用法

最新推荐文章于 2025-05-13 15:29:35 发布

ytm1996

最新推荐文章于 2025-05-13 15:29:35 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ytm1996/article/details/81017310

//json文件代码

{

"mane":"中国",
"provinces":
[
{
"proName":"贵州",
"cities":["贵阳","六盘水","遵义","铜仁","兴义","毕节","安顺","凯里","都匀"]
},
{
"proName":"河南",
"cities":["郑州","开封","洛阳","平顶山","安阳","鹤壁","新乡","焦作"]
},
{
"proName":"北京",
"cities":["东城区","西城区","朝阳区","丰台区","石景区","海淀区","顺义区"]
}
]
}

//HTML文件代码

<!DOCTYPE html>

<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function(){
               $.getJSON("json.json",function(data){
                   //生成省级菜单项
                   tempP="";
                   for(eachP in data.provinces)
                   {
                       tempP+="<option value='"+data.provinces[eachP].proName+"'>"+data.provinces[eachP].proName+"</option>";
                   }
                   $("#provinces").html(tempP);


                   //省级菜单生成后，立即调用生成城市菜单的函数getCities()生成第一个省份对应的城市菜单，及默认省对应的城市菜单
                   getCities($("#provinces").val());


                   //为省级菜单绑定change事件，当选定值发生改变时调用getCities()函数，生成所选省对应的城市菜单
                   $("#provinces").change(function(){
                       curP=$(this).val();
                       getCities(curP)
                       })


                   //getCities()函数根据省名筛选出对应的城市菜单
                   function getCities(proName)
                   {
                       for (eachP in data.provinces)
                       {
                           if(data.provinces[eachP].proName==proName)
                           {
                               tempC="";
                               for (eachC in data.provinces[eachP].cities)
                               {
                                   tempC+="<option value='"+data.provinces[eachP].cities[eachC]+"'>"+data.provinces[eachP].cities[eachC]+"</option>";
                               }
                               $("#cities").html(tempC);
                           }
                       }
                   }

               })
           })
       </script>
   </head>
   <body>
       省<select id="provinces">
           <option>正在加载</option>
       </select>
       市<select id="cities"><option>正在等待</option></select>
   </body>
</html>