Как получить индекс опции в меню выбора, сопоставляя текст с простым 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

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

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

Answer 2

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 3

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;
    }
}

Демо.

Answer 4

в обычном 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 5

Это должно сработать:

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 6

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 7

Свойство 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 8

[править - расширен для включения не-jquery метода]

I настоятельно рекомендуем использовать для этого 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