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

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

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

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

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

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

510
javascript jquery

19 ответов

учитывая этот HTML:

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

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

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);

выберите по описанию для версий jQuery ниже 1.6 и больше или равно 1.4: https://stackoverflow.com/a/3644500/31532

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).attr('selected', true);

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

выбрать по описанию для предыдущих версий:

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

например:

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"
735

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

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

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

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

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

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

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

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

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

19

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

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

      var textToSelect = "Hello World";

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

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

9

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

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

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

7

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

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

1.9+

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

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

5

посмотри плагин jQuery selectedbox 

selectOptions(value[, clear]):

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

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

4

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

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

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

3

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

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

3

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

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

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


function rpad(pStr, pLen, pPadStr) {
if (pPadStr == '') {pPadStr == ' '};
while (pStr.length < pLen)
    pStr = pStr + pPadStr;
return pStr; 
}
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

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

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

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

0

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

0

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

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