выберите опцию выбора по тексту с помощью javascript

Question

У меня есть поле выбора и одна строка, и я бы выбрал опцию по строке. Например, строка = "Volvo" и выберите поле, как это:

<select> 
 
    <option value="v1">Volvo</option> 
 
    <option value="v2">Saab</option> 
 
    <option value="v3">Mercedes</option> 
 
    <option value="v4">Audi</option> 
 
</select>

Может кто-нибудь мне помочь, пожалуйста?

Answer 1

Вы можете использовать селектор :contains для достижения этого:

var $option = $('select option:contains("Volvo")'); 

Или использовать переменную для значения:

var text = 'Volvo'; 
var $option = $('select option:contains("' + text + '")'); 

В качестве альтернативы можно использовать filter() для обеспечения точного совпадения требуемое значение:

var text = 'Volvo'; 
var $option = $('select option').filter(function() { 
    return $(this).text().trim() == text; 
}); 

Оттуда вам просто нужно установить checked свойство true:

$option.prop('checked', true); 

Answer 2

Используйте :contains() селектор псевдо-класса, чтобы получить вариант, который содержит определенную строку. И для обновления проверенных свойств использовать prop() способ.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="v1">Volvo</option> 
 
    <option value="v2">Saab</option> 
 
    <option value="v3">Mercedes</option> 
 
    <option value="v4">Audi</option> 
 
</select>

---

Для точного использования матча filter() метод, так как :contains() не проверить точное соответствие.

$('option').filter(function() { 
 
    // check trimmed text for filtering 
 
    return $.trim($(this).text()) == "Mercedes"; 
 
}).prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="v1">Volvo</option> 
 
    <option value="v2">Saab</option> 
 
    <option value="v3">Mercedes</option> 
 
    <option value="v4">Audi</option> 
 
</select>