JS сортировка select'a

248

17 марта 2018, 19:19

Можете подсказать код для сортировки select'a по алфавиту через JS. Гуглил пользовательскую сортировку в JS, но все время выдает только сортировку массива. Ума ни приложу с чего начать даже можно, примеров ноль, а сам я в JS не очень далек. Буду очень благодарен за помощь ) Может у кого то уже есть кусок кода готовый.

Answer 1

var sel = document.getElementById("x"); 
var arr = Array.from(sel.children).sort((x, y) => { 
  return x.text.localeCompare(y.text); 
}); 
arr.forEach(x => sel.appendChild(x)); 
sel.selectedIndex = 0;

<select id="x"> 
  <option>вафля</option> 
  <option>кафель</option> 
  <option>арагок</option> 
  <option>турок</option> 
  <option>агент007</option> 
</select>

Answer 2

let select = document.querySelector('select'); 
 
document.querySelector('#sortBtn').addEventListener('click', e => { 
  sortIt((a, b) => a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()); 
}); 
 
document.querySelector('#revertSortBtn').addEventListener('click', e => { 
  sortIt((a, b) => a.innerHTML.toLowerCase() < b.innerHTML.toLowerCase()); 
}); 
 
function sortIt(comparator){ 
  [...select.children] 
    .sort(comparator) 
    .forEach(c => select.appendChild(c)); 
}

<select> 
  <option>Б</option> 
  <option>А</option> 
  <option>Г</option> 
  <option>В</option> 
</select><br /><br /> 
<input type='button' id='sortBtn' value="Sort it!" /> | <input type='button' id='revertSortBtn' value="Revert sort it!" />