简体   繁体   中英

How to make option select selected by jquery

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 ie, 125 cm as selected.

I tried

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

But it is not working.

How can i make the option 125 selected ie, 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>

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> 

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> 

You can use val() by passing the option value

Live Demo

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

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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM