在选择中的更改事件与淘汰赛 [英] on Change event in select with knockout

问题描述

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

I have a problem how to call onchanges knock js to my select option, i already have a function and html, but when i choose the select option, nothing changes

<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);
},

推荐答案

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

Use knockout's two-way data-binds instead of manually subscribing to UI events.

Knockout的值 data-bind监听UI更改并自动跟踪最新的价值。

Knockout's value data-bind listens to UI changes and automatically keeps track of the latest value for you.

您可以使用 text ，而不是通过jQuery方法替换HTML。 code> attr 和其他值绑定，以便在您的选择发生变化时更新UI。

Instead of replacing HTML via jQuery methods, you use text, attr and other value bindings to update the UI whenever your selection changes.

如果您想在选择更改时执行其他工作（例如关闭弹出窗口），则订阅到所选值。

If you want to perform additional work when a selection changes (e.g. closing a pop up), you subscribe to the selected value.

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());

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

这篇关于在选择中的更改事件与淘汰赛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！