Есть ли какой-нибудь быстрый способ получить <option>из <select>по значению, используя JavaScript?

Question

У меня есть из списка параметров, и все, что я знаю, это значение параметра. Опция может быть или не быть выбрана.

Вот подвох: есть тысячи вариантов, и мне нужно сделать это несколько сотен раз в цикле. Прямо сейчас я перебираю массив «options» и ищу нужный вариант. Это слишком медленно (в том смысле, что на моей очень быстрой машине браузер блокировался, пока я не убил его через несколько минут).

Есть ли более быстрый способ сделать это? Я выберу специфичные для браузера способы, но, конечно, было бы неплохо использовать стандарт DOM.

Answer 1

Я бы сделал это так:

// first, build a reverse lookup
var optCount      = mySelect.options.length;
var reverseLookup = {};
for (var i = 0; i < optCount; i++)
{
  var option = mySelect.options[i];
  if (!reverseLookup[option.value])
  {
    // use an array to account for multiple options with the same value
    reverseLookup[option.value] = [];
  }
  // store a reference to the DOM element
  reverseLookup[option.value].push(option);
}

// then, use it to find the option
var foundOptions = reverseLookup["Value that you are looking for"];
if (foundOptions && foundOptions.length)
{
  alert(foundOptions[0].id);
}

Answer 2

Я бы предложил не иметь тысячи вариантов на ваш выбор.

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

Возможно, ваше приложение требует этого, но это не типичное использование этого элемента.

Answer 3

Это ответ Томалака с небольшим изменением скорости. Вы видите, что цикл while с итерацией вниз выполняется быстрее, чем цикл for с итерацией вверх. (Мне лень, поэтому я не буду предоставлять ссылку.)

var i = mySelect.options.length - 1;
var reverseLookup = {};
while ( i >= 0 )
{
  var option = mySelect.options[i];
  if (!reverseLookup[option.value])
  {
    // use an array to account for multiple options with the same value
    reverseLookup[option.value] = [];
  }
  // store a reference to the DOM element
  reverseLookup[option.value].push(option);
  i--;
}

// then, use it to find the option
var foundOptions = reverseLookup["Value that you are looking for"];
if (foundOptions && foundOptions.length)
{
  alert(foundOptions[0].id);
}

Answer 4

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

Answer 5

Я бы посоветовал взглянуть на такой фреймворк / инструментарий, как Dojo и способ выбора узлов DOM .

Инструментарий устраняет многие несоответствия браузера и позволяет быстро и легко выбирать и управлять узлами DOM.

Answer 6

Вы можете просмотреть все параметры один раз и поместить все элементы в ассоциативный массив. Тогда вы можете просто искать myOptions[valueImLookingFor].

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

В зависимости от ваших настроек и потребностей вы также можете сгенерировать массив JavaScript на стороне клиента и поместить его в разметку вместо (или в дополнение к) выбора.

Answer 7

нет, нет, вы делаете это действительно наилучшим способом. Единственное, что вы можете попробовать, возможно, для более быстрого поиска, - дать каждому из параметров тег ID, чтобы вы могли искать их как объект DOM, а не циклически просматривать дочерние объекты объекта DOM.

Answer 8

С jQuery что-то вроде этого может быть быстрее:

$("#idselect option[value='yourval']")

http://docs.jquery.com/Selectors/attributeEquals#attributevalue