jQuery - установка выбранного значения элемента управления select через его текстовое описание

518

У меня есть элемент управления select, а в переменной javascript у меня есть текстовая строка.

Использование jQuery Я хочу, чтобы выбранный элемент элемента управления select был элементом с текстовым описанием, которое у меня есть (в отличие от значения, которого у меня нет).

Я знаю, что настройка его по значению довольно тривиальна. например.

$("#my-select").val(myVal);

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

  • 1
    @DanAtkinson собирался сделать то же самое сам. select не имеет абсолютно никакого отношения к этому вопросу.
Теги:

19 ответов

746
Лучший ответ

Выберите по описанию для jQuery v1. 6+

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).prop('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

Версии jQuery ниже 1.6 и выше или равные 1.4

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).attr('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

Обратите внимание, что хотя этот подход будет работать в версиях выше 1.6, но меньше 1.9, он не рекомендуется с 1.6. Это не будет работать в jQuery 1. 9+.


Предыдущие версии

val() должен обрабатывать оба случая.

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>
  • 6
    Такое ощущение, что это не должно работать (кажется, это может быть неоднозначным), но на самом деле это должно работать нормально для меня. Благодарю.
  • 0
    @HermanD: да, я полагаю, что метод с именем "val" не должен выбирать опцию, основанную на чем-либо, кроме атрибута "value".
Показать ещё 13 комментариев
132

Я не тестировал это, но это может сработать для вас.

$("select#my-select option")
   .each(function() { this.selected = (this.text == myVal); });
86

Попробуйте это..., чтобы выбрать параметр с текстом myText

$("#my-Select option[text=" + myText +"]").attr("selected","selected");
  • 0
    Ответ @ spoulson работал на меня ... Я пытался сделать это без .each
  • 2
    Во многих случаях этот подход не работает, к сожалению. Мне даже пришлось преобразовать в классический $("#my-Select option[text=" + myText +"]").get(0).selected = true; стиль время от времени: (...
Показать ещё 4 комментария
38

Я делаю это по этому пути (jQuery 1.9.1)

$("#my-select").val("Dutch").change();

Примечание: не забывайте об изменении(), мне пришлось долго искать из-за этого:)

  • 1
    Хотелось бы, чтобы я голосовал несколько раз. Прошёл час, а я уже могу идти домой.
19
$("#myselect option:contains('YourTextHere')").val();

вернет значение первого параметра, содержащего ваше текстовое описание. Протестировано и работает.

  • 0
    Спасибо - я думаю, что это может быть версия, которую я использую, так как мне также нужно иметь логику для случаев, когда нет соответствующего текста, и это кажется самым простым механизмом для возможности сделать это.
  • 1
    имейте в виду, он получит только значение для первого параметра, соответствующего тексту.
Показать ещё 2 комментария
15

Чтобы избежать всех осложнений версии jQuery, я честно рекомендую использовать одну из этих очень простых функций javascript...

function setSelectByValue(eID,val)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].value==val) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

function setSelectByText(eID,text)
{ //Loop through sequentially//
  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
    Как это помогает вообще?
  • 0
    Позволяет выбрать опцию выбора через значение или текст (в зависимости от вызываемой функции). Например: setSelectByValue ('сосиски', '2'); Найдет и выберет вариант со значением «2» в объекте выбора с идентификатором «сосиски».
Показать ещё 1 комментарий
10

Эта строка работала:

$("#myDropDown option:contains(myText)").attr('selected', true);
9

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

      var textToSelect = "Hello World";

      $("#myDropDown option").each(function (a, b) {
            if ($(this).html() == textToSelect ) $(this).attr("selected", "selected");
        });

Надеюсь, что это поможет кому-то.

7
 $("#Test").find("option:contains('two')").each(function(){
     if( $(this).text() == 'two' ) {
        $(this).attr("selected","selected");
     }
 });

Оператор if делает точное совпадение с "двумя" и "двумя тремя" не будет сопоставлено

  • 0
    @jagd ты имеешь в виду $ ("# Test"). Val ('two') добьется цели
  • 0
    Нет, я не это имел ввиду. Я думаю, что мой комментарий был немного неясен, поэтому я просто удалил его. Я все же одобрил ваш ответ, потому что он работал для моей ситуации.
6

Самый простой способ с 1.7+:

$("#myDropDown option:text=" + myText +"").attr("selected", "selected"); 

1,9 +

$("#myDropDown option:text=" + myText +"").prop("selected", "selected"); 

Протестировано и работает.

  • 1
    Не в 1.9+ это не так. Начиная с версии 1.6, вы должны использовать .prop для изменения свойств DOM, а не .attr (для атрибутов HTML / DOM). См. Stackoverflow.com/q/5874652/1709587
  • 0
    Я бы использовал («выбран», правда) вместо истинного значения «выбран»
4

взгляните на jquery selectedbox плагин

selectOptions(value[, clear]): 

Выберите параметры по значению, используя строку в качестве параметра $("#myselect2").selectOptions("Value 1"); или регулярное выражение $("#myselect2").selectOptions(/^val/i);.

Вы также можете очистить уже выбранные параметры: $("#myselect2").selectOptions("Value 2", true);

3

Я обнаружил, что с помощью attr у вас будет несколько вариантов, выбранных, когда вы этого не хотите - решение должно использовать prop:

$("#myDropDown option:text=" + myText +"").prop("selected", "selected");

3

Просто на стороне записки. Мое выбранное значение не было установлено. И я искал всю сеть. На самом деле мне пришлось выбрать значение после вызова из веб-службы, потому что я получал от него данные.

$("#SelectMonth option[value=" + DataFromWebService + "]").attr('selected', 'selected'); 
$("#SelectMonth").selectmenu('refresh', true);

Итак, обновление селектора было единственным, что я отсутствовал.

  • 0
    Это правильный вариант - хотя ... я не вижу причин для второй строки. Должен работать как есть.
2

Вот очень простой способ. PLZ использовать его

$("#free").val("y").change();
1
 $('#theYear').on('change', function () {
 FY = $(this).find('option:selected').text();
 $('#theFolders').each(function () {
     $('option:not(:contains(' + FY + '))', this).hide();
 });
 $('#theFolders').val(0);
});

$('#theYear').on('mousedown', function () {
 $('#theFolders option').show().find('option:contains("Select")', this).attr('selected', 'selected');
});
1

У меня возникла проблема с приведенными выше примерами, и проблема была вызвана тем фактом, что мои значения поля выбора заполняются строками с фиксированной длиной 6 символов, но передаваемый параметр не был фиксированной длиной.

У меня есть функция rpad, которая будет правильно набирать строку, до указанной длины и с указанным символом. Итак, после заполнения параметра он работает.

$('#wsWorkCenter').val(rpad(wsWorkCenter, 6, ' '));


function rpad(pStr, pLen, pPadStr) {
if (pPadStr == '') {pPadStr == ' '};
while (pStr.length < pLen)
    pStr = pStr + pPadStr;
return pStr; 
} 
0

Этот принятый ответ не кажется правильным, в то время как .val('newValue') является правильным для функции, попытка получить выбор по его имени не работает для меня, мне пришлось использовать id и classname для получения моего элемент

  • 0
    Можете ли вы опубликовать пример кода?
0

Вот простой вариант. Просто установите свой список, а затем установите его текст в качестве выбранного значения:

$("#ddlScheduleFrequency option").selected(text("Select One..."));
0

Получить детей из окна выбора; петля через них; когда вы нашли тот, который вам нужен, установите его как выбранный параметр; return false, чтобы остановить цикл.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню