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

Question

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

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

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

Answer 8

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

      var textToSelect = "Hello World";

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

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

Answer 9

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

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

Answer 10

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

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

1,9 +

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

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