对象 —【Json遍历运用】

最新推荐文章于 2020-12-19 07:48:09 发布

原创最新推荐文章于 2020-12-19 07:48:09 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

55 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的省市联动下拉选择框的方法。通过预定义的城市数据结构，该方法能够根据用户选择的省份自动更新并显示对应的城市选项。此方案适用于需要收集用户地理位置信息的在线表单。

<select id="sel"></select>
<select id="sels"></select>
      <script type="text/javascript">
   var cityData=[{
      name:'河北省',
      city:[{
         name:'邢台市'
      },{
         name:'唐山市'
      },{
         name:'邯郸市'
      }]
   },{
      name:'广东',
      city:[{
         name:'珠海市'
      },{
         name:'汕头市'
      },{
         name:'佛山市'
      }]
   },{
      name:'河南',
      city:[{
         name:'珠海市1'
      },{
         name:'汕头市1'
      },{
         name:'佛山市1'
      }]
   }]
          var a='<option>==请选择省==</option>';
   for(key in cityData){
      a+='<option>'+cityData[key].name+'</option>';
   }
   $('#sel').html(a);
   $('#sel').change(function(){
      var htm='<option>==请选择市==</option>'
              for(key in cityData){
                  var cit=$(this).val()
                  if(cit==cityData[key].name){
            var b=cityData[key].city;
            for(key in b){
               htm+='<option>'+b[key].name+'</option>'
            }
            $('#sels').html(htm);
         }
              }
   })
</script>