Set the Option Value of Select with jquery

Question

I would like to set the value 'Saumon' of the following select as default value with jquery if condition is met. I know how to deal with conditions but really don't find a solution to this issue :

<div class="form-group" style="display: block;">
<label class="control-label col-sm-2">Sandwiches 1</label>
    <div class="col-sm-10">
        <select id="ordersdetailpartyloafsandwich1ID" name="child-partyloafsandwich1ID" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
            <option value=""></option>
            <option value="1">Saumon</option>
        </select>
        <span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" style="width: 100px;">
            <span class="selection">
                <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-ordersdetailpartyloafsandwich1ID-container">
                    <span class="select2-selection__rendered" id="select2-ordersdetailpartyloafsandwich1ID-container" title="Saumon">Saumon</span>
                <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
                </span>
            </span>
            <span class="dropdown-wrapper" aria-hidden="true"></span>
        </span>
    </div>

I have tried this :

https://jsfiddle.net/marcq/rL4nuhv6/1/

but the value is of course set outside the select box.

I'm stuck and would appreciate some expertise here since I don't want to alter the source code of my app. Thanks. Marc

You only have to set the value of select it will automatically select the proper option. Check this fiddle https://jsfiddle.net/aalok123/846hbz2g/4/ — Alok Mali, Jun 10 '19 at 11:42
@Alok Mali Thank you to have understood my question ;-) Your solution did it, but I'm unable to accept your answer which is a comment. Thanks cheers. — marcq, Jun 14 '19 at 07:45

score 0 · Answer 1 · answered Jun 10 '19 at 11:32

In your example you have wrong selector for options. I suggest you to use id as selector for html select. Smth like that

$('#ordersdetailpartyloafsandwich1ID').find('option[value=1]').attr('selected', true);
    $('#ordersdetailpartyloafsandwich1ID').val('1');

score 0 · Answer 2 · answered Jun 10 '19 at 11:34

0

Try adding the selected attribute in your desired option like this:

<option value="Saumon" selected>Saumon</option>

answered Jun 10 '19 at 11:34

Usman Afzal

376
3
9

score 0 · Answer 3 · answered Jun 10 '19 at 11:36

0

Hi @marcq you don't have to write too much of code for this you can simply add the value of that specific option something like that

$('select[name="child-partyloafsandwich1ID"]').val(1);

Thank You.

answered Jun 10 '19 at 11:36

Videsh Chauhan

371
2
18

score 0 · Answer 4 · answered Jun 10 '19 at 11:50

There are several mistakes on your fiddle:

You did not include jQuery.
Your select's name is child-partyloafsandwich1ID not name.
The :eq selector accepts a zero-based index.
Since your element have an id, you should use it as selector.

Now, knowing all of this, read Set the selected index of a Dropdown using jQuery

By the way, in this case you do not need jQuery to select that option. You can do it as follows:

document.getElementById('ordersdetailpartyloafsandwich1ID').selectedIndex = 1;

<div class="form-group" style="display: block;">
  <label class="control-label col-sm-2">Sandwiches 1</label>
    <div class="col-sm-10">
      <select id="ordersdetailpartyloafsandwich1ID" name="child-partyloafsandwich1ID" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
        <option value=""></option>
        <option value="1">Saumon</option>
      </select>
      <span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" style="width: 100px;">
        <span class="selection">
          <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-ordersdetailpartyloafsandwich1ID-container">
            <span class="select2-selection__rendered" id="select2-ordersdetailpartyloafsandwich1ID-container" title="Saumon">Saumon</span>
          <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
          </span>
        </span>
        <span class="dropdown-wrapper" aria-hidden="true"></span>
      </span>
    </div>
</div>

Set the Option Value of Select with jquery

4 Answers4