Question

I have a select element with this structure:

<div class="ddl">
    <select>
        <option selected value="select">Select</option>
        <option value="T">Toyota</option>
        <option value="P">Porsche</option>
        <option value="N">Nissan</option>
        <option value="V">Volkswagen</option>
    </select>
</div>

And there is no ID of the select element to pass it to the jQuery selector, just the parent class of the div.

How can I put any of these elements as the selected element by text, index or value?

Answer 1

There are different ways to interact with selector.

Using jQuery 1.6 and upper:

By text:

$('.ddl option:contains("Porsche")').prop('selected', true);

By index:

$('.ddl option:eq(1)').prop('selected', true);

By value:

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

---

With older versions:

By text:

$('.ddl option:contains("Porsche")').attr('selected', 'selected');

By index:

$('.ddl option:eq(1)').attr('selected', 'selected');

By value:

$('.ddl option[value="T"]').attr('selected', 'selected');