Question

我正在使用敲除来渲染选择下拉列表。第一次更改时，将填充第二个下拉列表。数据存储如下：

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

您可能已经猜到，option1，option2是主要下拉菜单的选项次要下拉菜单中的a / b / c选项及其相应的值。

我无法更新/初始化第二个下拉菜单的选项。我很困惑如何将填充的数据放入optionText和optionValues中这是我的绑定的片段。

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>

Answer 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 -->

动态填充淘汰中的选择中的选择选项

1 个答案: