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

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

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

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

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

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

Выбрать по описанию для 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>

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

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

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

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

Я делаю это таким образом (JQuery 1.9.1)

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

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

$("#myselect option:contains('YourTextHere')").val();

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

Чтобы избежать всех сложностей в версии 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;
}

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

      var textToSelect = "Hello World";

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

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

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

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

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

Оператор if делает точное совпадение с «два» и «два три» не будут сопоставлены

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

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

1.9+

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

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

Здесь очень простой способ. Пожалуйста, используйте его

$("#free").val("y").change();

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

selectOptions(value[, clear]): 

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

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

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

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

Таким образом, обновление селектора было единственным, что мне не хватало.

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

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

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

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

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


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

 $('#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');
});

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

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

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

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