Changing Custom Forms Dropdown programatically using Zurb Foundation

Question

I would like to change the dropdown field. Which is quite easy with a normal one, but Foundation replaces it with a custom dropdown field.

Here the HTML-Code:

<div class="row">
   <div class="small-centered columns">
  <select name="language" id='customDropdown' class='large languageDropdown'>
         <option value="de">German</option>
         <option value="en">English</option>
         <option value="ca">Castelliano</option>
         <option value="es">Spanisch</option>
         <option value="fr">Französisch</option>
         <option value="pt">Portugisisch</option>
      </select>
   </div>
</div>

This is what foundation makes out of it:

<div class="row">
<div class="small-centered columns">
    <select name="language" id="customDropdown" class="large languageDropdown hidden-field" data-id="1375994037026-oNYTe">
                <option value="de">German</option>
                <option value="en">English</option>
                <option value="ca">Castelliano</option>
                <option value="es">Spanisch</option>
                <option value="fr">Französisch</option>
                <option value="pt">Portugisisch</option>
           </select>
           <div class="custom dropdown large languageDropdown" data-id="1375994037026-oNYTe">
              <a href="#" class="current">German</a>
              <a href="#" class="selector"></a>
              <ul>
                  <li class="selected">German</li>
                  <li class="">English</li>
                  <li class="">Castelliano</li>
                  <li class="">Spanisch</li>
                  <li class="">Französisch</li>
                  <li class="">Portugisisch</li>
              </ul>
           </div>
  </div>
 </div>

My Javascript attemts:

1. $('#customDropdown').val(jd.language);

Works fine - but only with the hidden field - if I send the form the correct language is send to the server. But the visible DropDown Field still shows the old value.

2. $('#customDropdown').val(jd.language).trigger('change');

Unfortunately that does not work - even it works like charm over here - can't find out why it does not work with my code.

3. $('#customDropdown').val(jd.language).change(); Foundation.libs.forms.refresh_custom_select('.languageDropdown', true);

This throws a Javascript error:

Uncaught TypeError: Object .languageDropdown has no method 'next'

4. $('#customDropdown').val(jd.language); $(document).foundation();

Thought it will refresh the foundation javascript, but it doesn't. ...

Running out of ideas (maybe I oversee sth.? - That's what I hope you guys could help me to find) One interesting thing, though: If I submit the form, I am redirected to a submit-page. If I use the browser button to go back: .... VOILA! - The correct dropdown field is shown. But that's not quite what I want :P

Dave Dave · Accepted Answer · 2013-08-09T00:13:35

Zurb has made some changes since that example solution was originally posted (Foundation 2.2). With Foundation 4, you can request an update to the "custom" styles select-box using the following function-call:

Foundation.libs.forms.refresh_custom_select($('.languageDropdown'), true);

Replace $('.languageDropdown') with a selector for whichever original select-box you intend to refresh. Also, make sure that you've updated the original (hidden) select-box before calling this function. So in your case, you'd call the following in order to update the hidden select-box, then trigger the refresh by Foundation.

$('.languageDropdown').val('en');
Foundation.libs.forms.refresh_custom_select($('.languageDropdown'), true);

Changing Custom Forms Dropdown programatically using Zurb Foundation

1 Answers