Changing value of select box in Zurb's Foundation via JavaScript

javascript zurb-foundation
user225269 picture user225269 · Oct 10, 2012 · Viewed 7.2k times · Source

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

Marcin Raczkowski picture Marcin Raczkowski · May 15, 2013

There's also alternative use case when you're binding on change event yourself, you might not want to trigger it. Code to just force a refresh on select:

Foundation.libs.forms.refresh_custom_select(@jQueryElement, true)

where @jQueryElement is a original hidden select.

Related questions

"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

I've created a new Foundation 5 project through bash, with foundation new my-project. When I open the index.html file in Chrome an Uncaught TypeError: a.indexOf is not a function error is shown in the console, originating in jquery.min.…

Read More
Prevent href="#" link from changing the URL hash

I have a site that already takes advantage of the hash in the URL and I don't want it changed. When I use Zurb Foundation and use href="#" for the menu item, clicking on it removes the previous hash value. …

Read More
How to use google.maps.event.trigger(map, 'resize')

I am new to JS, and have found the answer to a previous question, which brought up a new question, which brought me here again. I have a Reveal Modal that contains a Google Map API. When a button is …

Read More