cannot set value of SELECT control when using jquery.selectbox

Question

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.

why do people downvote? is it so hard to understand questions like these can actually help someone later? thanks for this question and the solution! — Arturo, Sep 12 '13 at 06:10

score 3 · Answer 1 · answered Apr 26 '13 at 00:32

3

Not the optimal solution, but cleaner that the workaround you proposed, try this (basically, force the selectBox to update its html):

$("#order_billing_region").val("your value").selectBox("options", $("#order_billing_region").html());

answered Apr 26 '13 at 00:32

ronnyfm

1,973
25
31

Himanth Kumar · Answer 2 · 2014-07-28T14:00:40.867

0

I have found a workaround this way, we can detach the selectbox, then set value and attach the selectbox plugin to the dropdown again.

function fnClearJquerySelectBox(control,value)
{
   $("#order_billing_region").selectbox("detach");
   $("#order_billing_region").val(value);
   $("#order_billing_region").selectbox("attach");
}

fnClearJquerySelectBox("control","0");

Hope this helps..

edited Jul 28 '14 at 14:00

answered Feb 05 '14 at 13:51

Himanth Kumar

316
2
13

score 0 · Answer 3 · answered Sep 01 '14 at 08:34

0

I found following: https://github.com/marcj/jquery-selectBox/blob/master/readme.md

Code: $('select').selectBox('value', 1);

answered Sep 01 '14 at 08:34

ping

663
6
13

Paul · Accepted Answer · 2014-09-01T08:59:01.047

0

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());

edited Sep 01 '14 at 08:59

answered Mar 05 '12 at 15:07

Paul

25,812
38
124
247

cannot set value of SELECT control when using jquery.selectbox

4 Answers4