How to select an option in select using a text using jQuery?

Navigation
4

I have <select> created 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 the val("1") pass the text. For example: 

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

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

    
asked by anonymous 26.01.2017 / 17:00

3 answers

9

You can use the :contains() picker and pick up the value. 

$("#animal").val( $('option:contains("Bezerro")').val() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="animal">
    <option value="0">Novilha</option>
    <option value="1">Bezerro</option>
    <option value="2">Boi</option>
</select>

This will get the value of option that has Bezerro and then apply the value of select . It differentiates uppercase from lowercase so pay attention. In spite of the name ( :contains ) it does not only have to contain the searched word, instead the term must be identical.

If there are two% of "Hi" and another of "Hi, All Right?", using option 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>DigiteumadasopçõesdoSelect:<br><inputplaceholder="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>
    
26.01.2017 / 17:04
4

: contains () Selector

  

Select all elements that contain 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><selectid="animal">
    <option value="0">Novilha</option>
    <option value="1">Bezero</option>
    <option value="2">Boi</option>
</select>

.filter ()

  

Reduce the set of corresponding elements to those that   combine with the selector or pass the 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><selectid="animal">
        <option value="0">Novilha</option>
        <option value="1">Bezero</option>
        <option value="2">Boi</option>
    </select>
    
26.01.2017 / 17:11
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><selectid="animal">
    <option value="0">Novilha</option>
    <option value="1">Bezero</option>
    <option value="2">Boi</option>
</select>

Just like the friend @LucasCosta explained, in this way a function is created that receives as a parameter the selector of select and the text to be selected, so within that select I search the option that owns the text and select it using prop .

    
26.01.2017 / 17:12
What is the difference between the operator IN and ==? Transform a Normal Array into Multidimensional