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.


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


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))')

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;
});

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 é


15

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


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);

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 ) );

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();

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]")

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');
    });

1

Esse trabalho pra mim

$('#mySelect option:contains(' + value + ')').attr('selected', 'selected');

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);

-1

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


-1

Isso também irá funcionar.

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


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;
     };
  }

-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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.