在选择中的更改事件与淘汰赛

时间:2017-04-01 14:10:11

标签: javascript jquery knockout.js magento2 onselect

我有一个问题如何调用onchanges敲js到我的选择选项,我已经有一个函数和html,但是当我选择select选项时,没有任何改变

<select data-bind="event:{change:setSelectedStation() },
                   options: seedData,
                   optionsText: 'text',
                   optionsValue: 'value'">
</select>

这是我的功能

setSelectedStation: function(element, KioskId){
     this.getPopUp().closeModal();
     $('.selected-station').html(element);
     $('[name="popstation_detail"]').val(element);
     $('[name="popstation_address"]').val(KioskId);

     $('[name="popstation_text"]').val(element);
     // console.log($('[name="popstation_text"]').val());
     this.isSelectedStationVisible(true);
},

1 个答案:

答案 0 :(得分:9)

使用knockout的双向数据绑定,而不是手动订阅UI事件。

Knockout value数据绑定侦听UI更改并自动跟踪最新值。

除了通过jQuery方法替换HTML之外,您还可以使用textattr和其他value绑定在您的选择发生更改时更新UI。

如果您想在选择更改时执行其他工作(例如关闭弹出窗口),则subscribe为所选值。

&#13;
&#13;
var VM = function() {
  this.seedData = [
    { 
      text: "Item 1",
      data: "Some other stuff"
    },
    { 
      text: "Item 2",
      data: "Something else"
    },
    { 
      text: "Item 3",
      data: "Another thing"
    }
  ];
  
  this.selectedItem = ko.observable();
  
  this.selectedItem.subscribe(function(latest) {
    console.log("Input changed");
  }, this);
};

ko.applyBindings(new VM());
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="
        value: selectedItem,
        options: seedData,
        optionsText: 'text'">
</select>

<!-- ko with: selectedItem -->
<p>
  Your selection: <span data-bind="text: data"></span>
</p>
<!-- /ko -->
&#13;
&#13;
&#13;