2017-10-10 77 views
1

我試圖根據我在我的下拉列表中選擇的項目觸發警報消息。knockout js如何在下拉式選擇索引更改時觸發事件

在我們最初的項目中,我們試圖在選定索引中進行更改以觸發檢查所選索引是否已存在並且當前處於活動狀態。

HTML:

<select 
    data-bind="options:vmList, 
       optionsCaption: 'Selecting...', 
       optionsText: 'Hello',     
       optionsValue: 'Hello1', 
       value: getSelected">          
</select> 

<span data-bind="text:getSelected"></span> 

視圖模型:

$(function() 
{ 
    ko.applyBindings(VM); 
}); 

var VM = 
{ 
    vmList:ko.observableArray([{Hello:"1",Hello1:"2"}]), 
    Hello: ko.observable(), 

    getSelected: ko.observable(), 

    Hello: function() 
    { 
     alert('hello'); 
    } 
} 

我試圖this question但它沒有工作,出於某種原因。

+0

的[更改上下拉變化敲除可觀察到的js值]可能的複製(https://stackoverflow.com/questions/12677431/change-observable-value-on-dropdown-change-淘汰賽JS) – adiga

回答

1

您可以使用event: {change: selectedValueChanged}綁定到change事件綁定。它使用event綁定。

請注意,Knockout不是您可能通常期望的event屬性,而是將上下文作爲參數提供給事件處理程序。

$(function() 
 
{ 
 
    ko.applyBindings(VM); 
 
}); 
 

 
var VM = 
 
{ 
 
    vmList:ko.observableArray([{Hello:"1",Hello1:"2"}]), 
 
    Hello: ko.observable(), 
 

 
    getSelected: ko.observable(), 
 

 
    Hello: function() 
 
    { 
 
     alert('hello'); 
 
    }, 
 
    selectedValueChanged: function(context) { 
 
     console.log(context.getSelected()); 
 
     
 
     if(context.getSelected()) { 
 
     alert('You selected: ' + context.getSelected()); 
 
     } 
 
    } 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select 
 
    data-bind="options:vmList, 
 
       optionsCaption: 'Selecting...', 
 
       optionsText: 'Hello',     
 
       optionsValue: 'Hello1', 
 
       value: getSelected, 
 
       event: {change: selectedValueChanged}">          
 
</select> 
 

 
<span data-bind="text:getSelected"></span>

相關問題