Как получить индекс опции в меню выбора, сопоставляя текст с простым Javascript?

Question

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

<select id="names">
    <option value="">Please Select</option>
    <option value="1">John</option>
    <option value="2">Steve</option>
    <option value="3">Max</option>
</select>

Если у меня есть строка "Макс", как я могу получить индекс опции 4, чтобы я мог динамически установить его как selectedIndex с JavaScript?

Нет jQuery.

Answer 1

http://jsfiddle.net/x8f7g/1/

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

• Не используйте InnerHTML, он медленный и ломается и не соответствует стандартам
• Не используйте innerText, схожие причины, но не настолько серьезные
• Используйте функцию, чтобы вы могли сделать это снова и снова.
• Выберите дочерний текстовый узел и получите nodeValue, который подходит для разных браузеров.

---

Пример:

function indexMatchingText(ele, text) {
    for (var i=0; i<ele.length;i++) {
        if (ele[i].childNodes[0].nodeValue === text){
            return i;
        }
    }
    return undefined;
}

Answer 2

Попробуйте это, он должен найти и затем выбрать соответствующую опцию в поле выбора.

var searchtext = "max";
for (var i = 0; i < listbox.options.length; ++i) {
    if (listbox.options[i].text === searchtext) listbox.options[i].selected = true;
}

Answer 3

Вы можете использовать эту короткую функцию, чтобы сделать это:

      function findIndexfromOptionName( select, optionName ) {
    let options = Array.from( select.options );
    return options.findIndex( (opt) => opt.label == optionName );
}

Аргументы:

• select: анHTMLSelect элемент
• optionName: какstring

Объяснение:
В первой строке тела функции мы извлекаем<select> варианты в качествеarrayс использованиемArray.from(). Это позволяет нам использовать Array.prototype.findIndex() для возврата индекса первой опции, которая соответствует предоставленному имени, если есть, или вернуть -1 , если совпадения нет.

Хотите несколько причин, чтобы использовать его?
Он имеет короткую реализацию, и семантика довольно ясна. Тоже чистый JS.

Answer 4

var opts = document.getElementById("names").options;
for(var i = 0; i < opts.length; i++) {
    if(opts[i].innerText == "Max") {
        alert("found it at index " + i + " or number " + (i + 1));
        break;
    }
}

Demo.

Answer 5

В обычном JS

var sel, opts, opt, x, txt;
txt='Max';
sel=document.getElementById('names');
opts=sel.options;
for (x=0;x<opts.lenght;x++){
    if (opts[x].text === txt){
        opt=opts[x];
    }
}

Answer 6

Свойство options хранит параметры в меню выбора - переберите его и сравните содержимое.

var list = document.getElementById("names").options;

for(var i = 0; i<list.length; i++){
    if(list[i].text== "Max") { //Compare
        list[i].selected = true; //Select the option.
    }
}

JSFiddle: http://jsfiddle.net/cuTxu/2

Answer 7

Это должно сделать трюк:

var options = document.getElementsByTagName('select')[0].children,
    i,
    l = options.length,
    index;

for(i = 0; i < l; i++){
  if(options[i].firstChild.nodeValue === 'Max'){index = i};
}

Обратите внимание, что индекс основан на нуле, что означает, что он на единицу меньше, чем вы ожидаете.

Answer 8

var x = document.getElementById("names");
for(var i = 0; i<x.options.length; i++){
    if("Max" == x.options[i].text){
        doSomething();
        //maybe x.selectedIndex = i;
    }
}

Answer 9

[edit - расширен, чтобы включить не-jquery метод]

Я настоятельно рекомендую использовать для этого jQuery, поскольку решение состоит из одной строки:

jQuery('#names option:contains("Max")').val()

Однако, в любом случае, это чистая реализация JavaScript:

function findOption( select, matchMe ) {

  var

    // list of child options
    options = select.getElementsByTagName('option'),

    // iteration vars
    i = options.length,
    text,
    option;

  while (i--) {

    option = options[i];
    text = option.textContent || option.innerText || '';

    // (optional) add additional processing to text, such as trimming whitespace
    text = text.replace(/^\s+|\s+$/g);

    if (text === matchMe) {
      return option.getAttribute('value');
    }

  }

  return null;

}

Пример использования:

alert(
  findOption(
    document.getElementsByTagName('select')[0],
    "Max"
  )
);

Оповещения 3

Answer 10

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