10

Tenho um select e gostaria de selecionar um valor de acordo com o texto de outro campo que o usuário clicou.

Por exemplo. Ao clicar numa tag "p" com o texto "Abril" eu quero selecionar o option de texto "Abril" no meu select:

<select id="meses">
    <option value="0">Janeiro</option>
    <option value="1">Fevereiro</option>
    <option value="2">Março</option>
    <option value="3">Abril</option>
</select>

Minha tag p:

<p class="nomMes">Abril</p>

Queria algo assim:

var valMes = $('p.nomMes').text().trim();

$(document).on('click', 'p.nomMes', function(){
    $('#meses option[text='+valMes+']).prop('selected', true);
});

Mas o option[text=] não funciona então qual seria a forma mais elegante de fazer isso, sem precisar dar um loop no select por exemplo?

2
  • João, sei que sua pergunta foi sobre como fazer a busca no texto, mas se formos avaliar a performance não seria melhor atribuir por exemplo o id na tag <p> e buscar o valor onde o id for igual? Commented 24/02/2014 às 17:25
  • Sim, mas é uma implementação de urgência e devido as condições que existem na geração do código pelo servidor eu teria que mudar em vários lugares e no js somente em um.
    – Joao Paulo
    Commented 24/02/2014 às 17:57

3 Respostas 3

10

Neste caso eu usaria o recurso de filter do jQuery que vai retornar o primeiro resultado que ele encontrar com as definições da função que você determinou.

Exemplo:

$(document).ready(function () {
    // Armazena nome do mês que quer selecionar
    var mes = $('.nomMes').text().trim();
    // Guarda em opt o elemento que retornar do filtro que vai testar entre as
    // options possíveis
    var opt = $('#meses option').filter(function() {
        // testa entre as options qual delas tem o mesmo conteúdo que o desejado
        return $(this).text().trim() === mes;
    });

    // Redefine o atributo do elemento encontrado pra selecionado.
    opt.attr('selected', true);
});

DEMO

4
  • O que seria o "el" ?
    – Joao Paulo
    Commented 24/02/2014 às 14:46
  • Foi sem querer hehe, força do habito de não usar jQuery, mas no jQuery ali estava vindo o "index" da iteração. Se fosse um filter do Array.prototype.filter o primeiro é o conteúdo da iteração, segundo é o index e terceiro a própria array. Já no jQuery eles passam o conteúdo como contexto da função de callback. Commented 24/02/2014 às 14:46
  • Funcionou redondinho. Obrigado!
    – Joao Paulo
    Commented 24/02/2014 às 14:56
  • Um prazer amigo :) Commented 24/02/2014 às 15:06
5

Você pode usar o seletor contains do jQuery... não é exatamente o pedido mas resolve o problema no caso do domínio da busca possuir somente textos distintos:

$("#meses option:contains('"+valMes+"')").prop('selected', true);

Exemplo no jsfiddle

1
  • Essa solução fica bem legal também. Vou utiliza-la das proximas vezes.
    – Joao Paulo
    Commented 24/02/2014 às 16:54
-1

Você poderia atribuir o value ou text igual ao texto na option, assim:

<option value="Janeiro"> Janeiro </option>

ou

<option value="0" text="Janeiro"> Janeiro </option>

Ai precisa não utilizar o contains.

$("#meses option[value="Janeiro"]').prop('selected', true);

ou

$("#meses option[text="Janeiro"]').prop('selected', true);

Realizei alguns testes e dessa maneira, sem contains, o resultado chega a ser até 80% mais rápido.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .