How to select an option in <select> via text using jQuery?

Question

I have a <select> created in this way:

<select id="animal">
    <option value="0">Novilha</option>
    <option value="1">Bezerro</option>
    <option value="2">Boi</option>
</select>

To change the checkbox programmatically using jQuery I use the following command:

$("#animal").val("1"); /* faz com que  o Bezerro fique selecionado */

But I would like to know what it would be like to pass as a parameter instead of val("1") pass text. For example:

$("#animal").val("Bezerro");

In this case being selected the option "Calf". How to select an option in <select> through a text using jQuery ?

Answer 1

You can use the selector :contains() and then take his value.

$("#animal").val( $('option:contains("Bezerro")').val() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="animal">
    <option value="0">Novilha</option>
    <option value="1">Bezerro</option>
    <option value="2">Boi</option>
</select>

That way you get the value of option who possess Bezerro and then apply the value of select. It differentiates capital letters from minuscules so pay attention. Despite the name (:contains) it need not only contain the word sought, on the contrary the term must be identical.

If there are two option of "Oi" and another of "Oi, Tudo Bem?" using the :contains("Oi") only the first will be selected.

---

Example:

$('button').on('click',function(){nome=$('input').val();$("#animal").val($('option:contains("'+nome+'")').val())})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Digite uma das opções do Select: <br><input placeholder="pesquisar"><button>Atualizar</button><br><br><select id="animal"> <option value="0">Novilha</option> <option value="1">Bezero</option> <option value="2">Boi</option> <option value="3">Bezero Clone</option></select>

Answer 2

:contains() Selector

Select all elements containing the specified text.

$("#animal option:contains(Boi)").attr('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="animal">
    <option value="0">Novilha</option>
    <option value="1">Bezero</option>
    <option value="2">Boi</option>
</select>

.filter()

Reduce the corresponding set of elements for those who combine with selector or pass function test.

$("#animal option").filter(function() {
    return $(this).text() =='Bezero';
}).prop("selected", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="animal">
        <option value="0">Novilha</option>
        <option value="1">Bezero</option>
        <option value="2">Boi</option>
    </select>

Answer 3

A different way:

function selectByText(select, text) {
  $(select).find('option:contains("' + text + '")').prop('selected', true);
}

selectByText('#animal', 'Bezero');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="animal">
    <option value="0">Novilha</option>
    <option value="1">Bezero</option>
    <option value="2">Boi</option>
</select>

As the friend @Lucascosta explained, this way a function is created that takes as parameter the selector of the select and the text to be selected, then within that select I seek the option that has the specified text and I select it using the prop.