jquery - Bootstrap form-control class conflicting with Knockout databind -

i'm experiencing weird bug ie10 , doesn't happen in chrome or firefox.

the bug when use form-control bootstrap combine on pair of parent-child select elements knockout data binding, child select takes forever refresh. if mouse on child element, refreshes right away.

here's js reproduce it.

try browse link ie10 , change value in first select, second select not refresh unless wait long time or mouse on second select.

but if not use form-control class select elements, problem goes away in link.

html

<label for="cats">categories</label> <select id="cats" data-bind="options: availablecats, optionstext: 'name', value: selectedcat, event: {change: populateitems}" class="xform-control"></select> <label for="items">items</label> <select id="items" data-bind="options: availableitems, optionstext: 'name', value: selecteditem" class="xform-control 

js

$(document).ready(function () {     var basevm = function () {         var = {};         return that;     };      var testvm = function () {         var = basevm();          that.availablecats = ko.observablearray([{             name: '--'         }, {             name: 'pork'         }, {             name: 'ham'         }]);         that.selectedcat = ko.observable(null);         that.availableitems = ko.observablearray([]);         that.selecteditem = ko.observable(null);          that.populateitems = function () {             that.availableitems([]);              if (that.selectedcat().name === 'pork') {                 that.availableitems([{                     name: 'chop'                 }]);             } else if (that.selectedcat().name === 'ham') {                 that.availableitems([{                     name: 'spam'                 }]);             }         };          return that;     };      var vm = testvm();     ko.applybindings(vm); }); 

this problem ie10 redrawing issue.

another person had similar issue.

unfortunately, solution not ideal , hacky.

you need add code @ bottom of populateitems function after of update logic:

$('#items').hide(0, function(){$(this).show()}); 

this give ie10 nudge redraw select element.

here fiddle, updated working solution.