Какой селектор мне нужен, чтобы выбрать опцию по ее тексту?

207

Мне нужно проверить, <select>есть ли вариант, текст которого равен определенному значению.

Например, если есть <option value="123">abc</option>, я бы искал "abc".

Есть ли селектор для этого?

Я ищу что-то похожее, $('#select option[value="123"]');но для текста.

Hailwood
источник
Хм ... hasответ в SLaks полезен, но вопрос в ответе Флойда также хорош ... Я не знаю, что принять.
Hailwood
Кроме того, они чувствительны к регистру? (я ищу нечувствительность к регистру и всегда могу конвертировать в более низкое значение
Hailwood
1
Я использую основную функцию JavaScript .toLowerCase () и сравниваю, если требуется регистр символов. Кроме того, примите в качестве ответа тот, который наиболее полезен для вашего заданного вопроса. :)
Хари Пачуветил
это не работает для выпадающего меню с множественным выбором API ?? Я испробовал все возможные решения, но не повезло. Я использую API-интерфейс dropdowm Эрика Хинда. Кто-нибудь может решить эту проблему?
Чайтанья Чандуркар

Ответы:

320

Это может помочь:

$('#test').find('option[text="B"]').val();

Демо скрипка

Это даст вам возможность с текстом, Bа не те, которые содержат текст, который содержит B. Надеюсь это поможет

Для последних версий jQuery вышеупомянутое не работает. Как прокомментировал Quandary ниже, это то, что работает для jQuery 1.9.1:

$('#test option').filter(function () { return $(this).html() == "B"; }).val();

Обновленная скрипка

Хари Пачувеэтил
источник
1
это не работает с последними версиями jquery (если вы удалите 'value =' из <option>)
KevinDeus
27
@KevinDeus: Почему понизить? Ответ был для версии jQuery тогда!
Хари Пачуветил
11
Вместо этого используйте $ ('# test option'). Filter (function () {return $ (this) .html () == "B";}). Val ();
Стефан Штайгер
84
@Quandary Тем не менее, это не является веской причиной, чтобы отклонить ответ, когда достаточно короткого комментария. Или вы ожидаете от него повторного тестирования всех своих ответов для каждого нового выпуска jQuery?
WynandB
2
Я думаю, что отрицательный голос связан с тем, что приведенный выше пример просто находит выбранное значение, а не устанавливает выбранное значение.
nivs1978
133

Вы можете использовать :contains()селектор, чтобы выбрать элементы, которые содержат определенный текст.
Например:

$('#mySelect option:contains(abc)')

Чтобы проверить, есть ли у данного <select>элемента такая опция, используйте .has()метод :

if (mySelect.has('option:contains(abc)').length)

Чтобы найти все <select>s, которые содержат такую ​​опцию, используйте :has()селектор :

$('select:has(option:contains(abc))')
SLaks
источник
3
:containsне окончательно сейчас, не так ли?
Хари Пачуветил
В чем проблема именно с содержит?
Ожье Шелвис
Как бы вы сделали это только с выбранными параметрами?
toddmo
Разве это не захватывает вариант с 123abcdef?
Teepeemm
@Teepeemm Да, это разница между двумя топовыми ответами. Проверка только сверху возвращает параметр только с определенным текстом, этот параметр возвращает параметр, который содержит, но не только этот конкретный текст. Что, по совпадению, является тем, что мне действительно нужно в данный момент, поэтому я очень рад опубликовать его.
Ли А.
30

Ни одно из предыдущих предложений не помогло мне в jQuery 1.7.2, потому что я пытаюсь установить выбранный индекс списка на основе значения из текстового поля, а некоторые текстовые значения содержатся в нескольких параметрах. Я закончил тем, что использовал следующее:

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).attr('selected', 'selected');
        return false;
    }
    return true;
});
Доктор С. Илариус
источник
1
Я думаю, что это лучший ответ, потому что он на самом деле возвращает правильные результаты. Но я не могу не думать, что containsполное отсутствие может на самом деле ускорить процесс.
Styfle
Это сработало для меня, но в моем сценарии я мог несколько раз нажать кнопку «Изменить» на сетке, поэтому пришлось удалить выбранный атрибут, если не было совпадения, в противном случае первый выбранный параметр останется для последующих изменений. else {$ (this) .attr ('selected', ''); вернуть ложь; }
особенно
Это решение работало для меня, но вместо установки атрибута option, чтобы фактически изменить меню выбора, которое мне нужно было сделать: $(this).parent().val($(this).val()); вы, вероятно, могли бы сделать и то и другое, но для меня установка только родителя val()сделала свое дело.
Биллиноа
20

Я столкнулся с той же проблемой ниже, это рабочий код:

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

Демо: http://jsfiddle.net/YRBrp/83/

Джейдип шил
источник
15

Это сработало для меня: $("#test").find("option:contains('abc')");

Филипп Деннис
источник
3
Вы должны добавить объяснение того, почему это работает.
Ханнес Йоханссон
@HannesJohansson Или он должен хотя бы объяснить, чем он отличается, или добавить что-то новое в ответ SLaks, который почти на пять лет старше. ; ^)
Ерфин
4
Убедитесь, что вы понимаете, что эта опция также будет найдена: <option> abcd </ option>.
Чарльз
Спасибо, это определенно правильно, и то, что все пропустили, добавляет .attr ('value'); к концу. Это самый простой способ получить значение для динамического использования! Таким образом, полный код должен понравиться. $("#testselect").find("option:contains('option-text')").attr('value'); Таким образом, вы можете использовать событие, как .click()изменить настройку.
ChrisKsag
12

Это лучший метод для выбора текста в выпадающем списке.

$("#dropdownid option:contains(your selected text)").attr('selected', true);
sreejesh
источник
3
Как и в случае с аналогичными ответами, вы найдете вариант с this is your selected text plus more.
Teepeemm
4

Я пробовал некоторые из этих вещей, пока не получил один для работы в Firefox и IE. Это то, что я придумал.

$("#my-Select").val($("#my-Select" + " option").filter(function() { return this.text == myText }).val());

другой способ написать это в более читабельном стиле:

var valofText = $("#my-Select" + " option").filter(function() {
    return this.text == myText
}).val();
$(ElementID).val(valofText);

псевдокод:

$("#my-Select").val( getValOfText( myText ) );
user2561852
источник
Имеет смысл с последними версиями jQuery
Fr0zenFyr
Какой смысл "#my-Select" + " option"? Почему не просто "#my-Select option"?
Teepeemm
3

Используйте следующие

$('#select option:contains(ABC)').val();
Дадасо Занзане
источник
1
предоставленный вами код может решить проблему, но, пожалуйста, добавьте краткое описание того, как это решает проблему. Добро пожаловать в Stack Overflow, рекомендуем прочитать как ответить .
Дэн Болье
3
если есть несколько вариантов: ABC, ABCD, ABCDEF, тогда?
Hungndv
1

Это будет работать в jQuery 1.6 (обратите внимание на двоеточие перед открывающей скобкой), но не будет работать в более новых выпусках (1.10 в то время).

$('#mySelect option:[text=abc]")
Бартош Фирин
источник
5
Интересно, но, к сожалению, это не работает (jQuery 1.10.2).
WynandB
Вы хотели бы включить, что что-то подобное $("#mySelect option").filter(function() { return this.text == "abc"; });будет работать с последними версиями jQuery .. Или, возможно, каким-то другим способом, который вы предпочитаете использовать ..
Fr0zenFyr
1

Для jquery версии 1.10.2 у меня работало ниже

  var selectedText="YourMatchText";
    $('#YourDropdownId option').map(function () {
       if ($(this).text() == selectedText) return this;
      }).attr('selected', 'selected');
    });
Мир Гулам Сарвар
источник
1

Это работа для меня

$('#mySelect option:contains(' + value + ')').attr('selected', 'selected');
Карлос Кастаньеда
источник
0

Это работает для меня:

var result = $('#SubjectID option')
            .filter(function () 
             { return $(this).html() == "English"; }).val();

resultПеременная возвращает индекс совпавшего значения текста. Теперь я просто установлю его, используя его индекс:

$('#SubjectID').val(result);
Вилли Дэвид младший
источник
-1

Либо вы перебираете опции, либо помещаете тот же текст в другой атрибут опции и выбираете с этим.

dekomote
источник
-1

Это тоже будет работать.

$ ('# test'). find ("опция выбора: содержит ('B')"). filter (": selected");

Tjcool
источник
2
Это также захватит вариант ABC.
Teepeemm
-1

Как описано в этом ответе , вы можете легко создать свой собственный селектор для hasText. Это позволяет вам найти вариант с$('#test').find('option:hastText("B")').val();

Вот метод hasText, который я добавил:

 if( ! $.expr[':']['hasText'] ) {
     $.expr[':']['hasText'] = function( node, index, props ) {
       var retVal = false;
       // Verify single text child node with matching text
       if( node.nodeType == 1 && node.childNodes.length == 1 ) {
         var childNode = node.childNodes[0];
         retVal = childNode.nodeType == 3 && childNode.nodeValue === props[3];
       }
       return retVal;
     };
  }
wbdarby
источник
-2

Это работает для меня

var options = $(dropdown).find('option');
var targetOption = $(options).filter(
function () { return $(this).html() == value; });

console.log($(targetOption).val());

Спасибо за все сообщения.

jayson.centeno
источник