How to make option select selected by jquery

Question

Here is my HTML.

<select class="height_selected" id="renderHeight">
    <option>Select Height</option>
    <option value="1">123 cm</option>
    <option value="2">125 cm</option>
</select>

I want to make the Option 2 i.e., 125 cm as selected.

I tried

$('#1 :selected').text();

But it is not working.

How can i make the option 125 selected i.e., value that have #1 as selected

Update i have another option select

I want to make only the height to be selected.

<select class="weight_selected" id="renderWeight">
    <option>Select Weight</option>
    <option value="1">100 kg</option>
    <option value="2">125 kg</option>
</select>

Tushar · Accepted Answer · 2015-07-14T07:06:04.083

Use prop to select the option.

$('#renderHeight option[value="2"]').prop('selected', true);

Code Demo

$('option[value="2"]').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select class="height_selected" id="renderHeight">
  <option>Select Height</option>
  <option value="1">123 cm</option>
  <option value="2">125 cm</option>
</select>

You can also set the value using val().

$('#renderHeight').val(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select class="height_selected" id="renderHeight">
  <option>Select Height</option>
  <option value="1">123 cm</option>
  <option value="2">125 cm</option>
</select>

@Vamsi: this post on SO should help you regarding the selection of the options by their value (assuming by "name" you meant the value/content?): http://stackoverflow.com/a/6068322/1901282 — phex, Jul 14 '15 at 07:14

score 0 · Answer 2 · answered Jul 14 '15 at 07:05

Try this : To make option selected, you can directly set value of select box to the value of option to be selected.

$(function(){
  $('#renderWeight').val('2');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="weight_selected"  id="renderWeight">
<option>Select Weight</option>
<option value="1">100 kg</option>
<option value="2">125 kg</option>
</select>

score 0 · Answer 3 · answered Jul 14 '15 at 07:06

0

You can use val() by passing the option value

Live Demo

$('#renderHeight').val(2);

answered Jul 14 '15 at 07:06

Adil

146,340
25
209
204

score 0 · Answer 4 · answered Jul 14 '15 at 07:08

You can try this code

$('#renderHeight option').each(function(){
  if($(this).text() =='123 cm'){
    $(this).prop('selected',true)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="height_selected"  id="renderHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
</select>

How to make option select selected by jquery

4 Answers4