动态填充选择中的选择选项答案

【问题标题】：populate select options in select in knockout dynamically动态填充选择中的选择选项
【发布时间】：2019-04-25 22:56:43
【问题描述】：

我正在使用淘汰赛来呈现选择下拉菜单。第一次更改时会填充第二个下拉列表。数据存储如下：

选项1：{ 一个：“一些”， b：“一些” }, 选项2：{ 一个：“一些”， b：“一些” }

如您所料，option1,option2 是主要下拉菜单的选项二级下拉菜单有 a/b/c 选项及其对应的值。

我在更新/初始化第二个下拉菜单选项时遇到问题。我很困惑我应该如何将填充的数据放入 optionText 和 optionValues 这是我的绑定的 sn-p。

KOTAK :{
          EMIK12:"12_Months",
          EMIK18:"18_Months",
          EMIK24:"24_Months",
          EIK3:"3_Months",
          EMIK6:"6_Months",
          MIK9:"9_Months",
},
      INDUS : {
          EMIID12:"12_Months",
          EMIIND18:"18_Months",
          EMIIND24:"24_Months",
          EMIIND3:"3_Months",
          EMIIND36:"36_Months",
          EMIIND6:"6_Months",
          EMIIND9:"9_Months"
          
          },

<select aria-required="true" type="text" data-bind = "optionsCaption : 'Select Bank..',options : ($data.bankList() && $data.bankList()[0].BANKS) ? $data.bankList()[0].BANKS : [],
                    	                            event : {change : $data.onClickEmiOptions.bind(this)}"
                    	                class="form-control"></select>
                                      
<select aria-required="true" type="text" class="form-control" data-bind = "optionsCaption : 'Select Duration',
                    	                        options : $data.selectedEmiOptions,optionsText:function(item){return item;},optionsValue:''">
</select>

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

这是一种方法

function myViewModel() {
  var self = this;
  
  self.items = [{id: 1, name: 'Europe', times: [9,10,11,12]}, 
  {id: 2, name: 'America', times: [10,11,13]}];
  
  self.selectedItem = ko.observable(null);
  self.selectedTime = ko.observable(null);
  
  self.selectedItem.subscribe(function (item) {
  	self.selectedTime(item.times[0]);
  });
};

ko.applyBindings(new myViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: items, optionsText: 'name', value: selectedItem"></select>
<br />
<!-- ko with: selectedItem() -->
<select data-bind="options: times, value: $parent.selectedTime"></select>
<br />
<span data-bind="text: $parent.selectedItem().name"></span>
<br/>
<span data-bind="text: $parent.selectedTime"></span>
<!-- /ko -->

【讨论】：