Выбор элемента select по тексту в jQuery: практическое руководство

Быстрый ответ

Чтобы установить значение в выпадающем списке по тексту опции с использованием jQuery, можно применить комбинацию методов .filter() и .prop():

$('#selectElement option').filter(function() {
    return $(this).text() === 'Текст Опции';
}).prop('selected', true);

В данном случае код выполняет поиск и выбор <option> в элементе #selectElement, текст которого полностью соответствует заданному.

Версии jQuery и предпочтительные методы

При использовании jQuery версии 1.6 и новее рекомендовано применять метод .prop() для работы с свойствами DOM-элементов, включая свойство selected. В более ранних версиях для этих целей можно использовать функцию val():

// jQuery v1.6+: Используем .val() с вызовом события change.
$('#selectElement').val($('#selectElement option').filter(function() {
    return $.trim($(this).text()) === 'Текст Опции';
}).val()).change();

// Для версий ниже v1.6: Проходимся по каждой опции и устанавливаем значение вручную.
$('#selectElement option').each(function() {
    if ($.trim($(this).text()) == 'Текст Опции') {
        $(this).parent().val($(this).val());
        return false;
    }
});

Здесь функция $.trim() применяется для удаления пробелов, а также происходит вызов события change() для уведомления об изменении значения.

Борьба с пробелами, стремление к точному соответствию текста

Для обеспечения точного соответствия текста опции без учёта лишних пробелов следует использовать функцию $.trim(). После выбора нужной опции вызываем событие change():

$('#selectElement option').filter(function() {
    return $.trim($(this).text()) === 'Текст Опции';
}).prop('selected', true).parent().change();

Триггер событий для динамического взаимодействия

Для оповещения всех обработчиков об изменении значения применяйте вызов события change():

$('#selectElement').val('newValue').change();

Такой подход обеспечивает своевременное реагирование пользовательского интерфейса и обработчиков событий.

Визуализация

Рассмотрим аналогию с выбором шляпы персонажем, где текстовое описание шляпы соответствует значению для <option>:

// Нужная шляпа: "Ковбойская Шляпа"

1. 🤠 (Ковбойская Шляпа)
2. 👒 (Шляпа от Солнца)
3. 🎓 (Студенческий Кепи)
4. ⛑️ (Спасательная Шляпа)

Выбрать персонажа можно по тексту на его шляпе:

$('select#hats option').filter(function() {
    return $(this).text() == 'Ковбойская Шляпа';
}).prop('selected', true);

В итоге будет выбран персонаж с ковбойской шляпой.

Устранение потенциальных проблем

Опираясь на профессиональный опыт, можно предотвратить некоторые трудности:

Использование селектора :contains() для более широкого поиска

Если текстовое описание может содержать лишние символы, примените селектор :contains():

$('#selectElement option:contains("Часть Текста")').prop('selected', true);

Но стоит учесть, что этот селектор может быть слишком широким, хотя иногда это бывает удобно.

Подробнее об этом расскажет наш спикер на видео

Работа с похожими опциями

Если тексты опций похожи, требуется точное сопоставление:

$('#selectElement option').filter(function() {
    return $(this).text().match(/^Точный Текст$/);
}).prop('selected', true);

Следите за версией jQuery

Применяйте методы, которые соответствуют вашей версии jQuery:

if (jQuery.fn.jquery >= "1.6") {
    // Используйте .prop().
} else {
    // Возможно, стоит обновиться до более новой версии или применять .attr().
}

Полезные материалы

1. .val() | jQuery API Documentation — для работы со значениями элементов формы.
2. Change the selected value of a drop-down list with jQuery | Stack Overflow — обсуждение вопроса о том, как изменить выбранное значение в выпадающем списке.
3. .filter() | jQuery API Documentation — документация по методу .filter(), служащему для точной сортировки элементов.
4. How To Create Custom Select Menus | W3Schools — руководство по созданию настраиваемых полей выбора.
5. <select>: The HTML Select element | MDN — информация об элементе <select>.