JS中的json对象循环，以动态select为例

要写一个省市级联的功能，后台接口已经实现，需要前端一个动态select，借此机会，了解了一下JS中json对象的循环，发现有几处需要注意的地方，特意记录分享。
今天的主要记录有一下几点;

1、 JS中for in 循环
2、 动态select 数据植入
3、 获取select的option值

一、JS中for in 循环

<select  lay-ignore id="province">
        </select>
<script>
var provinceList = [
          { "areaid": "2","pid": "1", "name": "北京","level": 1, "ord": 1}，
          { "areaid": "3", "pid": "1","name": "上海","level": 1, "ord": 1}，
          { "areaid": "4","pid": "1","name": "南京","level": 1,"ord": 1}];
var province = document.getElementById("province");
 for(var i in provinceList){
       Object.keys(provinceList[0]).forEach(function(key){
       var provinceInfo = provinceList[0];
       if(key==='name'){
             var option = new Option(provinceInfo.name,provinceInfo.areaid);//新建options
             province.options.add(option);
         }
       });
  }          
</script>

这个是我js中的循环相关代码，其中，会发现对于JS来说，for in 循环是不一样的，特意拎出来做了一个测试说明。

  var list = ['q','a','z','w','s','x'];
  for(var i in list)
     alert(list[i])      

出来的结果是 0-5的数字，并不是咱们Java中直接的list集合数据。

也就是说，咱们在做一个对象集合的循环时，要进行两次循环才可以，外面循环主要定位到耨一个具体的对象，内部循环为遍历字段。

二、动态select数据植入

在不知道某个select具体数据的时候，需要进行动态植入，这个时候使用JSTL不太能融入spring依赖注入，低融合的思想，所以这里使用new option（）对象来将解决问题。

  var option = new Option(provinceInfo.name,provinceInfo.areaid);//新建options
  province.options.add(option);

其中new option( param1, param2), 第一个参数是展示数据，第二个参数是vlaue数据，可以方便之后的获取。

后面要记得使用options进行添加哦。

如果大家注意到我上面html页面中的 lay-ignore 修饰，应该能直接想到这是使用了layer的缘故。

如果同样遇到 layer 样式与select不兼容的情况，可以参考我的文档。

三、获取select的option值

一般在做级联选择的时候会有获取前级别select值的需求，但是如果像我一样对JS不是很懂得人来说，利用这个小知识直接作出功能会有点难度，

在获取书select值的时候，如果进行百度，会有以下几个方案：

  var pros=document.getElementById("provinceList").selectedIndex;
  var pros=document.getElementById("provinceList").val();
  var pros=document.getElementById("provinceList").value;

按照经验而言，直接使用第三个就可以啦！

第一个方法是在网上直接百度的时候遇到的，由于时间紧任务重，没有过多思考，也没有看官方文档，直接复制粘贴下来使用，结果这个方法得到的值很神奇，就好像是经过了什么计算一样，让初用者摸不着头脑；

第二个会报错，导致方法直接不执行，当然像JS这样比较端庄的语言，也不会直接给咱们报错，会比较麻烦。

听我的没错。

----------------------------------------------------这是分割线，代表结束------------------------------------------------------------

THE END
GOOD LUNK