Set select option 'selected', by value

Question

I have a select field with some options in it. Now I need to select one of those options with jQuery. But how can I do that when I only know the

Answer 1

Deselect all first and filter the selectable options:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

Answer 2

<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

Setting to Pending Status by value

   $('#contribution_status_id').val("2");

Answer 3

Best way is like this:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

Answer 4

Just put in this code:

$("#Controls_ID").val(value);

Answer 5

This works for sure for Select Control:

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });

Answer 6

It's better to use change() after setting select value.

$("div.id_100 select").val("val2").change();

---

By doing this, the code will close to changing select by user, the explanation is included in JS Fiddle:

JS Fiddle