Selecting an option using fancy select

Question

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.

score 5 · Accepted Answer · answered Mar 05 '14 at 16:28

5

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

answered Mar 05 '14 at 16:28

Felix

37,892
8
43
55

Works and is much cleaner than my method. Thanks! – jSherz Mar 05 '14 at 16:33

score 0 · Answer 2 · answered Mar 05 '14 at 16:28

0

Solved it by setting the select.val() to the text of the option I'm trying to select.

answered Mar 05 '14 at 16:28

jSherz

927
4
14
33

score 0 · Answer 3 · edited Jan 27 '17 at 16:54

0

I solved it by mending FS's code. It was using :selected as a selector. Changed it to [selected="selected"] and it behaved. Best to just avoid FS completely though, in my opinion. I inherited it on a project I'm working on.

Around line 56 in my copy, now changed to:

triggerHtml = settings.triggerTemplate(sel.find('[selected="selected"]'));

edited Jan 27 '17 at 16:54

Vemonus

868
1
16
28

answered Jan 27 '17 at 15:59

AlreadyTriedGoogle

63
5

Selecting an option using fancy select

3 Answers3