Search code examples
javascriptjquerygumby-framework

Selecting an option using fancy select

I've got a fancy select with code similar to the following, yet adding the selected=selected attribute to one of the options (with JS) does not change which item is currently selected.

<li class="field">
  <div class="picker">
    <select>
      <option value="#" disabled>Favorite Doctor…</option>
      <option>Colin Baker</option>
      <option>Sylvester McCoy</option>
      <option>Paul McGann</option>
      <option>Christopher Eccleston</option>
      <option>David Tennant</option>
      <option>Matt Smith</option>
    </select>
  </div>
</li>

How can I change the selected option and have this change reflected in the select box.

Solution

  • Try to trigger the change event after you set the selected option, for example:

    $('option:eq(2)').prop('selected',true).trigger('change'); // or .change()

    Fiddle Demo