ti-enxame.com

jQuery: Definindo a lista de seleção 'selecionada' com base no texto, falhando de maneira estranha

Eu tenho usado o seguinte código (com jQuery v1.4.2) para definir o atributo 'selecionado' de uma lista de seleção com base em sua descrição de 'texto' em vez de seu 'valor':

$("#my-Select option[text=" + myText +"]").attr("selected","selected") ;

Este código funcionou bem, até que notei uma lista de seleção em que ele falhou, dependendo do texto que estava sendo correspondido. Depois de puxar o cabelo, percebi que ele estava falhando apenas nos casos em que o texto era um único Word (sem espaços, sem caracteres não-alfa). (Todos os meus usos anteriores desse código funcionaram bem com listas de seleção compostas somente por nomes químicos multi-Word.)

Por exemplo, dentro de uma lista de seleção, funcionou bem com:
ácido farmaceutico
25-D-spirosta-3,5-diene
pogostol (# Pogostemon #) 

Ele falhou com:
glicose
adenina

Eu tentei qualquer maneira que eu poderia pensar em cercar a variável de texto com aspas (simples e duplas) sem sucesso. (Mas por que uma única palavra precisa de citações quando uma frase de duas palavras não é?)

Eu tentei codificar o texto lá e tive o mesmo resultado.

Isso funciona:

$("#constituent option[text=#a#-allocryptopine]").attr('selected', 'selected');

Isso funciona:

$("#constituent option[text=5-O-methylrisanrinol]").attr('selected', 'selected');

Este não funcionou

$("#constituent option[text=adenine]").attr('selected', 'selected');

Eu tentei citações de codificação rígidas. Este não funcionou:

$("#constituent option[text='glucose']").attr('selected', 'selected');

Não consegui obter citações codificadas (simples ou duplas) para trabalhar com o texto any.

Vale a pena notar que as cotações são aceitáveis ​​ao usar o atributo 'valor'. Por exemplo, ambos funcionam bem:

$("#constituent option[value='3']").attr('selected', 'selected');

$("#constituent option[value=3]").attr('selected', 'selected');

Abaixo está algum código para demonstrar o problema. Duas listas de seleção, a primeira das quais é composta de palavras simples, a segunda de duas frases do Word. Quando a página é carregada, tenta definir o valor de cada lista de seleção. O código jQuery funciona para a segunda lista, mas não para a primeira. (Eu tentei colocar um espaço em 'monkey' para pegar 'mon key' e deu certo!)

Uma demonstração de trabalho do código abaixo é aqui .

Eu apreciaria muito qualquer visão sobre o que estou fazendo de errado aqui. Ou até mesmo uma sintaxe de seletor alternativa para usar o atributo 'text'. Agradecemos antecipadamente a todos que têm tempo para ajudar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head>

  <script type="text/javascript" src="../js/jquery/jquery.js"></script>

  <script type="text/javascript">

  $(document).ready(function(){

    var text1 = 'Monkey';
    $("#mySelect1 option[text=" + text1 + "]").attr('selected', 'selected');

    var text2 = 'Mushroom pie';
    $("#mySelect2 option[text=" + text2 + "]").attr('selected', 'selected');        

  });

  </script> 

</head>

<body>

  <select id="mySelect1">
    <option></option>
    <option>Banana</option>
    <option>Monkey</option>
    <option>Fritter</option>
  </select> 

  <select id="mySelect2">
    <option></option>
    <option>Cream cheese</option>
    <option>Mushroom pie</option>
    <option>French toast</option>
  </select> 

</body>

</html>
49
Stuart Allen

Quando um <option> não é dado um value="", o texto torna-se value, então você pode simplesmente usar .val() no <select> para definir por valor, assim:

var text1 = 'Monkey';
$("#mySelect1").val(text1);

var text2 = 'Mushroom pie';
$("#mySelect2").val(text2);

Você pode testá-lo aqui , se o exemplo é não o que você está procurando e eles realmente têm um valor, use a propriedade <option> do elemento .text para .filter() , assim:

var text1 = 'Monkey';
$("#mySelect1 option").filter(function() {
    return this.text == text1; 
}).attr('selected', true);

var text2 = 'Mushroom pie';
$("#mySelect2 option").filter(function() {
    return this.text == text2; 
}).attr('selected', true);​

Você pode testar essa versão aqui .

106
Nick Craver

tente isso:

$("#mySelect1").find("option[text=" + text1 + "]").attr("selected", true);
12
ScottE

$("#my-Select option:contains(" + myText +")").attr("selected", true);

Isso retorna a primeira opção contendo sua descrição de texto. 

12
Deivide

Usar a função filter () parece funcionar em seus casos de teste (testados no Firefox). O seletor ficaria assim:

$('#mySelect1 option').filter(function () {
    return $(this).text() === 'Banana';
});
4
wsanville

Caso alguém pesquise por isso, as soluções acima não funcionaram pra mim então acabei usando o javascript "puro"

document.getElementById("The id of the element").value = "The value"

E isso definiria o valor e tornaria o valor atual selecionado na caixa de combinação. Testado no firefox.

foi mais fácil do que ficar pesquisando uma solução para o jQuery

2
chepe263

O seguinte funciona para entradas de texto com e sem espaços:

$("#mySelect1").find("option[text=" + text1 + "]").attr("selected", true);
1
Matt

$ ('# my-Select option'). each (function () {

        if ($(this).text() == roll)
            $(this).attr('selected', 'selected');
        else
            $(this).removeAttr('selected');

    });
0
vaseem
    If you want to selected value on drop-down text bases so you should use below changes:
    Here below is example and country name is dynamic:
    <select id="selectcountry">
    <option value="1">India</option>
    <option value="2">Ireland</option>
    </select>
<script>
     var country_name ='India'
     $('#selectcountry').find('option:contains("' + country_name + '")').attr('selected', 'selected');
</script>
0
Chirag Prajapati

Eu costumo usar:

$("#my-Select option[text='" + myText +"']").attr("selected","selected") ;
0
Ly Thanh Ngo
setSelectedByText:function(eID,text) {
    var ele=document.getElementById(eID);
    for(var ii=0; ii<ele.length; ii++)
        if(ele.options[ii].text==text) { //Found!
            ele.options[ii].selected=true;
            return true;
        }
    return false;
},
0
ash

Podemos fazer isso pesquisando o texto nas opções da lista suspensa e, em seguida, definindo o atributo selecionado como verdadeiro.

Este código é executado em todos os ambientes.

 $("#numbers option:contains(" + inputText + ")").attr('selected', 'selected');
0
Kaushik Das