JQuery: установка списка выбора "выбрано" на основе текста, что не так странно

Я использовал следующий код (с jQuery v1.4.2), чтобы установить "выбранный" атрибут списка выбора на основе его "текстового" описания, а не его "значение":

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

Этот код работал нормально, пока я не заметил один список выбора, на котором он не удалось, в зависимости от текста, который был сопоставлен. После некоторого притягивания волос я понял, что он терпит неудачу только в тех случаях, когда текст был одним словом (без пробелов, без альфа-символов). (Все мои предыдущие применения этого кода отлично работали с избранными списками, состоящими исключительно из многословных химических названий.)

Например, в пределах одного списка выбора он отлично работал с:
фарбитная кислота
25-Д-spirosta-3,5-диен
pogostol (# Pogostemon #)

Не удалось:

глюкозе аденин

Я попытался каким-то образом подумать о том, чтобы окружать текстовую переменную кавычками (как одиночными, так и двойными) безрезультатно. (Но почему одно слово должно указывать, если нет двухсловной фразы?)

Я пробовал жестко кодировать текст там и имел тот же результат.

Это работает:

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

Это работает:

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

Этот не работает:

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

Я пробовал жесткие кодовые цитаты. Этот не работает:

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

Я не мог получить закодированные кавычки (одиночные или двойные) для работы с любым текстом вообще.

Стоит отметить, что кавычки приемлемы при использовании атрибута 'value'. Например, обе эти функции работают нормально:

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

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

Ниже приведен код для демонстрации проблемы. Два списка выбора, первый из которых состоит из простых слов, второй из двух фраз слова. Когда страница загружается, она пытается установить значение каждого списка выбора. Код jQuery работает во втором списке, но не в первом. (Я попытался помещать пробел в "обезьяну", чтобы получить "mon key", и это сработало!)

Ниже приведена рабочая демонстрация приведенного ниже кода .

Я был бы очень признателен за понимание того, что я делаю неправильно здесь. Или даже альтернативный синтаксис выбора для использования атрибута "text". Спасибо заранее всем, у кого есть время, чтобы помочь.

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

Ответ 1

Если <option> не задано value="", текст становится его value, поэтому вы можете просто использовать .val() в <select> для установки по значению, например:

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

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

Здесь вы можете протестировать его, если этот пример не то, что вам нужно, и у них действительно есть значение, используйте <option> element .text для .filter(), например:

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

Вы можете протестировать эту версию здесь.

Ответ 2

попробуйте следующее:

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

Ответ 3

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

Это возвращает первый вариант, содержащий ваше текстовое описание.

Ответ 4

Использование функции filter() работает в ваших тестовых случаях (проверено в Firefox). Селектор будет выглядеть так:

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

Ответ 5

В случае, если у кого-то Google для этого, вышеупомянутые решения не сработали для меня, поэтому я закончил использование "чистого" javascript

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

И это установит значение и сделает текущее значение выбранным в поле со списком. Протестировано в firefox.

было проще, чем искать решение для jQuery

Ответ 6

Следующее работает для текстовых записей как с пробелами, так и без них:

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

Ответ 7

Мы можем сделать это, выполнив поиск текста в опциях выпадающего списка, а затем установив для выбранного атрибута значение true.

Этот код запускается в каждой среде.

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

Ответ 8

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

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

    });

Ответ 9

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

Ответ 10

Я пробовал некоторые из этих вещей, пока не получил возможность работать как в Firefox, так и в IE. Это то, что я придумал.

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

другой способ записать его в более читаемом fasion:

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

псевдокод:

$("#my-Select").val( getValOfText( myText ) );