jQuery Chosen doesn't update select options while working with knockout js

jquery, jquery-chosen, knockout.js

Solution

You have two problems:

- in your fiddle there is no `.chosen-select` so your `update` function does not find the `select` but anyway you should use `$(element)` to access the currently bound element

- in KO 3.0 bindings are fired independently. Because your `chosen` binding is not connected to the your observable array your `update` won't fire when you change that array.

You can solve this "update" problem with explicitly declaring a dependency on the `options` binding in your custom binding but a better solution would be to delegate to it:

ko.bindingHandlers.chosen = {
    init: function(element)  {
        ko.bindingHandlers.options.init(element);
        $(element).chosen({disable_search_threshold: 10});
    },
    update: function(element, valueAccessor, allBindings) {
        ko.bindingHandlers.options.update(element, valueAccessor, allBindings);
        $(element).trigger('chosen:updated');
    }
};

And use it where you would normally use the `options` binding:

<select id="option1" class="form-control" 
    data-bind="chosen: payoutOptions, 
               optionsText: 'optionText', 
               optionsValue: 'optionValue', 
               value: activePayoutOption"></select>

Demo JSFiddle.

Problem

I am trying to make jQuery Chosen and KnockoutJS work at the same time. The problem is "jQuery Chosen" refuses to update options list even though I've created custom binding for it. Here is the example - http://jsfiddle.net/5fGAf/ I have two changeable selects - "Country" and "Method". "Method" options list depends on country selected. When I select the country for the first time - everything works perfect. But when I want to change the country - "Method" options list remains the same, even though corresponding knockout computed value is updated. If I manually run `$(".chosen-select").trigger('chosen:updated')` in the browser console - options list updates. Custom binding code: ``` ko.bindingHandlers.chosen = { init: function(element) { $(element).chosen({disable_search_threshold: 10}); }, update: function(element) { $(".chosen-select").trigger('chosen:updated'); } }; ```

Original source