淘汰赛 - 如何使用选项和foreach绑定在一起

Question

我有来自服务器的ajax数据，我应该生成选择框。 请查看this code：

var dataCameFromServer = {
  foo: "1",
  bar: "sag",
  results: [
    {
      slectedBoxID: null,
      selectBoxOptions: [
        {
          id: 1,
          name: "mosi"
        },
        {
          id: 2,
          name: "azi"
        },
        {
          id: 3,
          name: "mom"
        },
        {
          id: 4,
          name: "dad"
        }
      ]
    },
    {
      slectedBoxID: 2,
      selectBoxOptions: [
        {
          id: 1,
          name: "tehran"
        },
        {
          id: 2,
          name: "masal"
        },
        {
          id: 3,
          name: "gilan"
        },
        {
          id: 4,
          name: "rasht"
        }
      ]
    },
    {
      slectedBoxID: 1,
      selectBoxOptions: [
        {
          id: 1,
          name: "adidas"
        },
        {
          id: 2,
          name: "nike"
        },
        {
          id: 3,
          name: "rebook"
        },
        {
          id: 4,
          name: "puma"
        }
      ]
    }
  ]
};

function selectViewModel() {
  var self = this;
  this.data = ko.observable(dataCameFromServer);
  this.sbValue = ko.observableArray();
  ko.computed(function() {
    $.each(self.data().results, function(i,v) {
      self.sbValue.push(v.slectedBoxID);
    });
  });
  ko.computed(function(){
  console.log(self.sbValue());
});
}


ko.applyBindings(new selectViewModel(), $("#wrapper")[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapepr">
  <!-- ko with: data -->
  <!-- ko foreach : results -->
  <select data-bind="options:selectBoxOptions,optionsText: 'name',optionsValue: 'id',value: $root.sbValue()[$index],optionsCaption: 'Choose...'"></select>
  <!-- /ko -->
  <!-- /ko -->
</div>

我希望我的选择框默认由slectedBoxID中的选项选中，如果我的选择框发生了更改，则相应slectedBoxID的值会发生变化。

有什么建议吗？

p.s：我不知道有多少结果来自服务器，这不仅仅是这三个结果！