在选择更改事件与淘汰赛

Question

我有一个问题，如何调用onchanges敲JS给我选择的选项，我已经有一个功能和HTML，但是当我选择的选择选项，没有什么变化

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

Answer 1

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

敲除的value数据绑定侦听UI更改并自动跟踪您的最新值。

而不是通过jQuery方法替换HTML，您可以使用text,attr和其他value绑定来更新UI，只要您的选择更改。

如果您想在选择更改（例如关闭弹出窗口）时执行其他工作，您可以将subscribe设置为选定的值。

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