Selectboxit - How to refresh selected values in selectboxit

Question

I am using selectboxit plugin - http://gregfranko.com/jquery.selectBoxIt.js/

With a normal select element, setting the prop of selected element will update the UI. With selectboxit it is not working.

Demo - http://jsfiddle.net/uXM6Y/

var selectBox = $("select#test").selectBoxIt().data("selectBoxIt");

$('.btn').click(function(e){
    $('#test option:contains("Great")').prop('selected', true);
});

When i click on the update button in the demo, select is not set to the updated value. If i remove the selectboxit plugin it works fine.

Answer 1

You want to use the selectboxit method API, which is not present in your version of the plugin.

Get it from here (make sure that the setOption method is selected for your download): http://gregfranko.com/jquery.selectBoxIt.js/customDownload.html#javascript-downloads

And change your javascript as follows:

var selectBox = $("select#test").selectBoxIt().data("selectBoxIt");

$('.btn').click(function(){
    selectBox.selectOption('Great');
});

EDIT: Here is an updated version of your fiddle using the complete selectboxit plugin: http://jsfiddle.net/uXM6Y/2/