Search code examples
javascriptjqueryknockout.jshtml-selectbootstrap-multiselect

bootstrap multiselect drop down is not dropping down


I'm using the bootstrap multiselect plugin and binding the data to it with knockout js. It is in this jsfiddle. The options actually do get data-bound to the multiselect - You can confirm this by right clicking the multiselect element in the jsfiddle output window and inspecting it, and the <option>'s are indeed there. However, clicking the multiselect element does not cause the dropdown to drop down.

The bootstrap multiselect does not seem to know that it has <option>'s in the <select>, this is proven when I use the disableIfEmpty configuration option, it disables the multiselect permanently. Why does the bootstrap multiselect not know that it has options, thus causing it to not open the drop down?

jsfiddle here


Solution

  • You can only instantiate your multiselect widgets after knockout has done its rendering, which is basically after your apply bindings.

    To get the idea, check out this forked fiddle: http://jsfiddle.net/r0kbch7u/

    I've basically moved the $("#category-select").multiselect() code from your CategorySelect constructor to your document loaded event listener.