Question

I’m having difficulty changing the value of select box in Zurb’s foundation. I’m using the custom forms which just hides the actual select box and uses an unordered list as the select box.
My problem is that the usual method of changing the value of select box doesn’t work:

$('#selectboxID').val('something')

The code above assumes that the value of each of the options in the select box is the same with the text:

<option value="1">1</option>

I also tried:

$($('.dropdown ul li')[1]).addClass('current') 

$($('.dropdown ul li')[0]).removeClass('current') //remove current class from the other one

But it doesn’t work either.

Answer 1

You have to trigger “change” event after changing selected index.

Example:

// Change selected option
$('#selectboxID').val('something');
// Or use selectedIndex: $("#selectboxID")[0].selectedIndex = 0;

// Fire change event
$('#selectboxID').trigger('change');

Hope this helps