小程序实现不定个数选择框值的保存和显示

最近项目中用到给不定数量人员选择状态的问题，之前只做过一个选择框的例子，就是把值和索引记录在遍历里面，然后多个选择框，就无法采用这个方法，想了一天，最终用数组保存的值，效果图如下

下面贴下代码：js文件代码

Page({  /**   * 页面的初始数据   */  data: {    selectArr:['A','B','C','D','E'],    selectedArr: []  },  select: function(e){    var id = e.currentTarget.dataset.id    var that = this    wx.showActionSheet({      itemList: that.data.selectArr,      success: function (res) {        console.log(res.tapIndex)        if (typeof res.tapIndex != 'undefined'){          var arr = wx.getStorageSync('selectedArr');          for(var i=0;i<arr.length;i++){            if(arr[i].id == id){              arr[i].index = res.tapIndex            }          }          wx.setStorageSync('selectedArr', arr)          that.setData({ selectedArr : arr })        }      },      fail: function (res) {        console.log(res.errMsg)      }    })  },  formSubmit: function(e){    console.log('form发生了submit事件，携带数据为：', e.detail.value)    var num = e.detail.value.num    var str = new Array()    for(var i=0;i<num;i++){      str.push({'id':i+1,index:0})    }    this.setData({ selectedArr: str})    wx.setStorageSync('selectedArr', str)  }})

wxml代码

<form bindsubmit="formSubmit"><view>请输入生成的选择框个数：<input class='borwse-input' focus="true" placeholder="个数" type='text' name="num" /></view><view><button form-type='submit'>确定</button></view></form><block wx:for="{{selectedArr}}" wx:for-item="sa">  <view bindtap="select" data-id="{{sa.id}}">选项{{sa.id}}    <block wx:for="{{selectedArr}}" wx:for-item="s">        <block wx:if="{{s.id == sa.id}}">            {{selectArr[s.index]}}        </block>    </block></view></block>

代码如上，希望多多指教。