在選擇更改事件與淘汰賽

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