Qual seletor preciso selecionar uma opção pelo texto?

207

Eu preciso verificar se a <select>tem uma opção cujo texto é igual a um valor específico.

Por exemplo, se houver um <option value="123">abc</option>, eu estaria procurando "abc".

Existe um seletor para fazer isso?

Estou procurando algo semelhante, $('#select option[value="123"]');mas para o texto.

Hailwood
fonte
Hmm ... a hasresposta no SLaks é útil, mas o ponto na resposta do Floyds também é bom ... Não sei o que aceitar.
Hailwood
Além disso, estes são sensíveis a maiúsculas e minúsculas? (im procurando caso insensibilidade e sempre pode apenas converter para diminuir
Hailwood
1
Uso a função principal do JavaScript .toLowerCase () e comparo, se for necessária diferenciação entre maiúsculas e minúsculas. Além disso, aceite como resposta a que for mais útil para a sua pergunta. :)
Hari Pachuveetil 19/09/10
ele não funciona para uma lista suspensa com API multiselect? Eu tentei todas as soluções possíveis, sem sorte. Estou usando a API dropdowm multiselecionada de eric hynd. Alguém pode resolver esse problema?
Chaitanya Chandurkar

Respostas:

320

Isso pode ajudar:

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

Violino de demonstração

Isso daria a você a opção de texto Be não aqueles que contêm texto B. Espero que isto ajude

Para versões recentes do jQuery, o acima não funciona. Conforme comentado pelo dilema abaixo, é isso que funciona para o jQuery 1.9.1:

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

Violino atualizado

Hari Pachuveetil
fonte
1
Isso não funciona com as versões mais recentes do jQuery (se você remover 'value =' de <option>)
KevinDeus
27
@KevinDeus: Por que o voto negativo !? A resposta foi para a versão do jQuery então!
Hari Pachuveetil 25/10/11
11
Em vez disso, use $ ('# test option'). Filter (function () {return $ (this) .html () == "B";}). Val ();
Stefan Steiger
84
@Quandary Ainda assim, não é uma razão válida para votar a resposta quando um breve comentário é suficiente. Ou você espera que ele teste novamente todas as suas respostas para cada nova versão do jQuery?
WynandB
2
Eu acho que o voto negativo é devido ao fato de que o exemplo acima apenas encontra o valor selecionado e não define o valor selecionado.
Nivs1978 01/03/19
133

Você pode usar o :contains()seletor para selecionar elementos que contenham texto específico.
Por exemplo:

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

Para verificar se um determinado <select>elemento tem essa opção, use o .has()método :

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

Para encontrar todos os <select>s que contêm essa opção, use o :has()seletor :

$('select:has(option:contains(abc))')
SLaks
fonte
3
:containsnão é definitivo agora, é?
Hari Pachuveetil 19/09/10
Qual é o problema exatamente com contém?
Ogier Schelvis
como você faria isso apenas com as opções selecionadas?
toddmo
Isso também não pega uma opção 123abcdef?
21418 Teepeemm
@Teepeemm Sim, essa é a diferença entre as duas principais respostas. As verificações apenas no topo retornam a opção apenas com o texto específico, este retorna a opção que contém, mas não é apenas, esse texto específico. Que, coincidentemente, é o que eu realmente preciso no momento, por isso estou muito feliz por publicá-lo.
Lee A.
30

Nenhuma das sugestões anteriores funcionou para mim no jQuery 1.7.2 porque estou tentando definir o índice selecionado da lista com base no valor de uma caixa de texto, e alguns valores de texto estão contidos em várias opções. Acabei usando o seguinte:

$('#mySelect option:contains(' + value + ')').each(function(){
    if ($(this).text() == value) {
        $(this).attr('selected', 'selected');
        return false;
    }
    return true;
});
Dr. C. Hilarius
fonte
1
Penso que esta é a melhor resposta, porque na verdade retorna os resultados corretos. Mas não posso deixar de pensar que omitir containscompletamente pode realmente acelerar as coisas.
styfle
Isso funcionou para mim, mas no meu cenário eu poderia clicar em editar em uma grade várias vezes, para remover o atributo selecionado quando não houvesse correspondência, caso contrário a primeira opção selecionada permaneceria nas edições subsequentes. else {$ (this) .attr ('selected', ''); retorna falso; }
esp
Essa solução funcionou para mim, mas em vez de definir o atributo da opção, para alterar o menu de seleção que eu precisava fazer: $(this).parent().val($(this).val()); você provavelmente poderia fazer as duas coisas, mas para mim, definir apenas o pai val()fez o truque.
precisa saber é
20

Eu enfrentei o mesmo problema abaixo é o código de trabalho:

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

Demonstração: http://jsfiddle.net/YRBrp/83/

Jaydeep Shil
fonte
15

Isso funcionou para mim: $("#test").find("option:contains('abc')");

Phillip Dennis
fonte
3
Você deve adicionar uma explicação de por que está funcionando também.
21415 Hannes Johansson
@ HannesJohansson Ou ele deveria pelo menos explicar como é diferente ou acrescentar algo novo à resposta do SLaks que é quase cinco anos mais velha. ; ^)
ruffin
4
Certifique-se de que você também encontrará esta opção: <option> abcd </option>.
Charles
Obrigado, isso está definitivamente correto e o que todo mundo perdeu está adicionando .attr ('value'); até o fim. Esta é a maneira mais fácil de realmente obter o valor para usar de maneira dinâmica! Portanto, o código completo deve ser assim. $("#testselect").find("option:contains('option-text')").attr('value'); Dessa forma, você pode usar um evento como .click()para alterar uma configuração.
ChrisKsag
12

Este é o melhor método para selecionar texto na lista suspensa.

$("#dropdownid option:contains(your selected text)").attr('selected', true);
sreejesh
fonte
3
Tal como acontece com respostas semelhantes, isso encontrará uma opção com this is your selected text plus more.
22418 Teepeemm
4

Eu tentei algumas dessas coisas até conseguir trabalhar no Firefox e no IE. Isto é o que eu vim com.

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

outra maneira de escrevê-lo de maneira mais legível:

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

Pseudo-código:

$("#my-Select").val( getValOfText( myText ) );
user2561852
fonte
Faz sentido com as últimas versões do jQuery
Fr0zenFyr 8/15
Qual o sentido disso "#my-Select" + " option"? Por que não apenas "#my-Select option"?
22418 Teepeemm
3

Use as seguintes

$('#select option:contains(ABC)').val();
Dadaso Zanzane
fonte
1
o código que você forneceu pode resolver o problema, mas adicione uma breve descrição de como isso resolve o problema. Bem-vindo ao Stack Overflow, leitura recomendada Como responder .
22815 Dan Beaulieu
3
se houver algumas opções: ABC, ABCD, ABCDEF, então?
Hungndv 3/11
1

Isso funcionará no jQuery 1.6 (observe dois pontos antes do colchete de abertura), mas falha nas versões mais recentes (1.10 no momento).

$('#mySelect option:[text=abc]")
Bartosz Firyn
fonte
5
Interessante, mas infelizmente não parece funcionar (jQuery 1.10.2).
WynandB
Você gostaria de incluir que algo como $("#mySelect option").filter(function() { return this.text == "abc"; });vai funcionar com versões mais recentes do jQuery .. Ou, provavelmente, alguma outra maneira que você preferir usar ..
Fr0zenFyr
1

Para jquery versão 1.10.2 abaixo funcionou para mim

  var selectedText="YourMatchText";
    $('#YourDropdownId option').map(function () {
       if ($(this).text() == selectedText) return this;
      }).attr('selected', 'selected');
    });
Mir Gulam Sarwar
fonte
1

Esse trabalho pra mim

$('#mySelect option:contains(' + value + ')').attr('selected', 'selected');
Carlos Castañeda
fonte
0

Isso funciona para mim:

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

A resultvariável retornará o índice do valor do texto correspondente. Agora vou configurá-lo usando seu índice:

$('#SubjectID').val(result);
Willy David Jr
fonte
-1

Você itera pelas opções ou insere o mesmo texto em outro atributo da opção e seleciona com isso.

dekomote
fonte
-1

Isso também irá funcionar.

$ ('# test'). find ("selecione a opção: contém ('B')"). filter (": selected");

Tjcool
fonte
2
Isso também agarra a opção ABC.
Teepeemm 6/03/19
-1

Conforme descrito nesta resposta , você pode criar facilmente seu próprio seletor para o hasText. Isso permite que você encontre a opção com$('#test').find('option:hastText("B")').val();

Aqui está o método hasText que eu adicionei:

 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
fonte
-2

Isso funciona para mim

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

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

Obrigado por todas as mensagens.

jayson.centeno
fonte