Сортировка options внутри select

Question

Есть несколько списков в HTML:

<select data-temp_number="144" data-key="pa_razmer-struny" data-label="Размер струны" class="filter_select select2 filter filter_select_pa_razmer-struny" id="pa_razmer-struny_144"><option value="">Размер струны</option><option value="pa_razmer-struny_144_488">20 мм</option><option value="pa_razmer-struny_144_489">25 мм</option><option value="pa_razmer-struny_144_490">30 мм</option><option value="pa_razmer-struny_144_491">21 мм</option><option value="pa_razmer-struny_144_492">5 мм</option><option value="pa_razmer-struny_144_493">35 мм</option></select><br>
<select data-temp_number="144" data-key="pa_dlina" data-label="Длина" class="filter_select select2 filter filter_select_pa_dlina" id="pa_dlina_144"><option value="">Длина</option><option value="pa_dlina_144_152">1700 мм</option><option value="pa_dlina_144_242">2100 мм</option><option value="pa_dlina_144_358">1950 мм</option></select>

И есть код на JS, который призван сделать сортировку

function sorted(names){
for(var c=document.getElementsByClassName(names)[0],b=c.options,a=0;a<b.length;)
    if( b[a+1] && parseFloat(b[a].text) > parseFloat(b[a+1].text) ){
        c.insertBefore(b[a+1],b[a]);
        a = a >= 1 ? a-1 : a+1
    } else a++;
    b[0].selected=true 
};

sorted("filter_select");

Проблема в том, что этот код, почему-то, делает сортировку только для первого списка, второй будто не видит. В чем моя ошибка? Ведь у обоих списков одинаковый class и я а JS получает элемент по getElementsByClassName

Answer 1

Вы, видимо, плохо представляете, как работает цикл for

for (let i = 0; i < 3; i++) { // выведет 0, затем 1, затем 2
  alert(i);
}

i = 0 Выполняется один раз при входе в цикл

Так же и у вас

var c=document.getElementsByClassName(names)[0],b=c.options,a=0

выполнится ОДИН раз при инициализации цикла. Поэтому и select отсортируется только первый.

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

И еще момент

var c=document.getElementsByClassName(names)[0]

Здесь вы всегда обращаетесь к первому элементу выборки, к первому селекту.

Answer 2

Лично мне ваш код читать было трудно(a,b,c...), вот простой пример как можно отсортировать options:

function sort(names) {
  const selects = document.getElementsByClassName(names)

  for (let i = 0; i < selects.length; i++) {
    const currentSelect = selects[i],
      sortedOptions = [...currentSelect.options].sort((o1, o2) => parseFloat(o1.text) - parseFloat(o2.text))

    currentSelect.innerHTML = ''
    sortedOptions.forEach(o => currentSelect.add(o))

    currentSelect.selectedIndex = 0
  }
};

sort("filter_select");

<select data-temp_number="144" data-key="pa_razmer-struny" data-label="Размер струны" class="filter_select select2 filter filter_select_pa_razmer-struny" id="pa_razmer-struny_144">
  <option value="">Размер струны</option>
  <option value="pa_razmer-struny_144_488">20 мм</option>
  <option value="pa_razmer-struny_144_489">25 мм</option>
  <option value="pa_razmer-struny_144_490">30 мм</option>
  <option value="pa_razmer-struny_144_491">21 мм</option>
  <option value="pa_razmer-struny_144_492">5 мм</option>
  <option value="pa_razmer-struny_144_493">35 мм</option>
</select><br>
<select data-temp_number="144" data-key="pa_dlina" data-label="Длина" class="filter_select select2 filter filter_select_pa_dlina" id="pa_dlina_144">
  <option value="">Длина</option>
  <option value="pa_dlina_144_152">1700 мм</option>
  <option value="pa_dlina_144_242">2100 мм</option>
  <option value="pa_dlina_144_358">1950 мм</option>
</select>

БЛОГ НА HUSL

Сортировка options внутри select

Ответы (2 шт):