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.