knockout js如何在更改下拉列表选择索引时触发事件

时间:2017-10-10 09:29:01

标签: html 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,但由于某种原因它没有用。

1 个答案:

答案 0 :(得分: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>