jquery在选择控制的源/选项更改时发生邮件

Question

我有一个场景，我可以访问选择控件（组合框），我需要一种方法来在其源/选项列表更改时触发事件。

例如，如果我有一个选择控件，它首先将 Option1 和 Option2 作为其选项， I need a way to fire an event when the options change to Option1, Option3, Option4.我不在乎是否添加、删除了新选项，或者是否新添加了所有项目。 All I want is a event handler when the options of a select control change.

其中一位朋友建议 DOM 更改为 Option 元素添加到 DOM，但我不确定，因为每次页面中的任何 dom 元素更改时都会触发 DOM 更改。

更新： 很抱歉造成混乱。我不是在寻找选择更改。我正在寻找实际选项列表的更改。

我正在使用 Knockoutjs，并且我将一个可观察数组作为选项绑定到一个选择控件。 knockoutjs 的 applybindings 需要几毫秒，然后将 observable 数组设置为 Select 控件的选项。我需要挂钩到该更改事件，以便我可以根据新的选项集做一些事情。

在有人说为什么不处理可观察数组的更改之前，我无法在我拥有事件处理程序的位置访问该可观察数组。

更新 2：

这里有更多信息。

我有一个选择控件，它有一个自定义绑定，就像这样。

 @Html.KnockOutDropDownListFor(rule => ruleTemplate.RuleReserveWordId, new List<SelectListItem>(), null,
              new {data_bind = "options: $root.RuleReserveWords, optionsText:'Name', optionsValue:'RuleReserveWordId', typeaheadCombobox: {sizeClass : 'input-mini'}" }

@Html.KnockoutDropDownlIstFor 是我编写的一个自定义 ASP.NET MVC 帮助程序，用于创建一个具有所有适当剔除相关属性的选择控件。 它最终将一个选择控件呈现给 DOM。

我想要的选择控件应该是一个自动完成/预先输入的组合框。由于我们使用的是引导程序，因此我们从这里使用了引导程序插件

https://github.com/danielfarrell/bootstrap-combobox

在我的自定义绑定中，我尝试调用插件。

selectControl.customcombobox();

插件基本上在选择控件上创建一个输入控件并隐藏选择控件。 同时，它会尝试访问选择控件的选项，并在用户开始输入时设置为输入控件的下拉菜单。

问题是因为我很早就调用了ko.applybindings（因为我认为无论我在哪里调用applybindings，一旦绑定都设置好了，UI会自动更新），当插件被调用时，绑定尚未绑定。所以，选择控件 没有设置实际的选项。所以，输入控件没有设置任何值。

如果我在几毫秒后调用插件，它会在绑定完成时工作。但这是有风险的，因为如果服务器调用时间更长，事情就会再次中断。

这就是为什么我想看看是否有办法找到任何一个

1) 使用jquery更新选择控件选项时（从无选项到绑定后的某些选项）。没有办法直接做到这一点。 有些人建议使用更新的 DOM，但它不适用于所有浏览器并且已被弃用。

或

2) 在敲除中找到一种方法来找出绑定到选择控件的实际 observablearray 何时更新（在此示例中为 RuleReserveWords）。 这将是我的首选方式。

我不能使用“更新”，因为每次更改选择控件中选择的值时都会调用它。这不是我想要的。

只要我知道什么时候更新选项，我就有办法更新选项。

我尝试的另一种方法是这样。在调用插件之前，我尝试添加选项以自己选择控制。 DOM 渲染得很好，但不知何故，在绑定后没有立即设置选择。

ko.bindingHandlers.typeaheadCombobox = {
    init: function (element, valueAccessor, allBindingsAccessor)
    {
        var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
        var selectControl = $(element);
        var options = allBindingsAccessor().options;
        var optionsValuePropertyName = allBindingsAccessor().optionsValue;
        var optionsTextPropertyName = allBindingsAccessor().optionsText;
        //Add appropriate class for the typeahead combobox plugin to work
        selectControl.addClass('combobox');
        $.each(options(), function (index, option)
        {
            var value = null;
            var text = null;
            for (var propertyName in option)
            {
                if (propertyName)
                {
                    if (propertyName == optionsValuePropertyName)
                    {
                        value = option[propertyName];
                    }
                    else if (propertyName == optionsTextPropertyName)
                    {
                        text = option[propertyName];
                    }
                }
            }
            if (value && text)
            {
                selectControl.append('<option value=' + value() + '>' + text() + '</option>');
            }
        });
        //Call bootstrap custom combobox plugin on the select control
        selectControl.customcombobox(options());
        //Find the input control that is created by the bootstrap custom combobox plugin to set input control settings like size, style, validation attributes, etc
        var inputControl = selectControl.parent().find('input');
        inputControl.attr('name', selectControl.attr('name'));
        inputControl.attr('data-val', selectControl.attr('data-val'));
        inputControl.attr('data-val-required', selectControl.attr('data-val-required'));
        inputControl.attr('style', selectControl.attr('style'));
        if (inputControl && valueUnwrapped && valueUnwrapped.sizeClass) //Used the sizeClass instead of class itself becasue IE7 was having issues if using class or 'class' for custom bindings.
        {
            inputControl.addClass(valueUnwrapped.sizeClass);
        }        
    }

Answer 1

我假设 RuleReserveWords 是一个可淘汰的可观察数组？在这种情况下，您可以订阅它。当列表更改时，订阅应该触发......

viewModel.RuleReserveWords.subscribe(function() { ... list has changed here... })