Search code examples
jquery-pluginsdrop-down-menusetjquery-selectbox

cannot set value of SELECT control when using jquery.selectbox

When using jquery.selectbox.js plugin for making great looking SELECT dropdowns, I encountered a problem that I'm unable to select current value using JQuery: $("#select_id").val("my value");

The probable solution is to remove $('#select_id').selectbox(); call, but I lose the design.

What to do?

Investigation:

When using jquery.selectbox the real dropdown is hidden on the page and only its presentational elements made by jquery.selectbox are visible (actually they are DIVs). The problem is that when .val() is updated, corresponding visible DIV (with class="jquery-selectbox-currentItem") is not updated.

Solution

  • I've invented a workaround:

    var ctlName = "#order_billing_region";
var ctl = $(ctlName);
ctl.val("my value");
//A workaround for buggy jquery.selectbox
ctl.siblings(".jquery-selectbox-currentItem").html($(ctlName + " option:selected").html());