淘汰js如何在更改下拉选择索引时触发事件

Question

我正在尝试根据我在下拉列表中选择的项目触发警报消息。

在我们最初的项目中，我们试图对选定索引进行更改，以触发检查该选定索引是否已经存在并且当前处于活动状态。

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，但由于某种原因它不起作用。

Answer 1

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

请注意，与您通常期望的 event 属性不同，Knockout 为您提供上下文作为事件处理程序的参数。

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