Question

I’m trying to use dropkick.js to build a dropdown menu in a web app. I like dropkick.js because of the keyboard support and good custom theming capabilities. However, it only seems to work with static menus; when I dynamically update the original element (using knockout.js bindings), the dropkick.js menu does not update.

To clarify, the issue is that programmatically changing the value of selectedChannel (or the channels list itself) does not cause the dropdown to update. The other way does work (click in dropdown, see selectedChannel variable update).

Either a link to an existing solution to this problem or pointers on how to tackle solving this myself by modifying dropkick.js (or using a custom knockout.js binding?) would be much appreciated. Or, maybe it can/should work but I’m doing something wrong?

binding using knockout.js:

<select id="channelSelector" data-bind="options: channels, optionsText: 'name', optionsValue: 'id', value: selectedChannel"></select>

setup code:

$('#channelSelector').dropkick();

update code using knockout.js which does not cause the dropdown to update its selected value:

vm.selectedChannel(vm.channels()[0].id);

Example of problem: http://jsfiddle.net/37QvY/

Answer 1

you should read this answer and the comments, that’s what helped me get it done.

Issues Setting Value/Label Using DropKick Javascript

Cheers!