Сортировка опций селекта букмарклетом (JS)

21 апреля 2021, 15:50

Господа помогите с сортировкой опций списка выбора. Они сейчас сортированы по value, а я хотел бы по тексту.
У меня есть список с целой кучей опций, вроде, такого:

Опция 1 Самара;
Опция 2 Москва;
Опция 3 Владивосток;

Список задаётся со следующими параметрами: <select class="select__control" id="uniq156387453229221002" tabindex="-1" aria-hidden="true"> <option class="select__option" value="381028">

Answer 1

const select = document.querySelector('#uniq156387453229221002'); 
const options = [...select.querySelectorAll('#uniq156387453229221002 option')]; 
 
options.sort((a, b) => a.textContent.localeCompare(b.textContent)); 
 
options.forEach((option) => { 
  select.append(option); 
});

<select class="select__control" id="uniq156387453229221002"> 
  <option class="select__option" value="1">Самара</option> 
  <option class="select__option" value="2">Москва</option> 
  <option class="select__option" value="3">Владивосток</option> 
</select>

Answer 2

Суровый букмарклет )), с отформатированным в одну строку кодом, для помещения его в href-атрибут ссылки:

javascript: var opts = [], sel = "select.select__control"; document.querySelectorAll(sel + " .select__option").forEach(function (el) { opts.push(el); el.remove();}); opts.sort(function (a, b) { var a = a.text, b = b.text; return a.localeCompare(b);}); var selel = document.querySelector(sel); opts.forEach(function (el) { selel.append(el); }); document.querySelector(sel + " option:nth-child(1)").setAttribute("selected", "selected"); void 0;

Отформатированный код:

var opts = [], sel = "select.select__control"; 
document.querySelectorAll(sel + " .select__option")
.forEach(function (el) {
    opts.push(el);
    el.remove();
});
opts.sort(function (a, b) {
    var a = a.text, b = b.text;
    return a.localeCompare(b);
});
var selel = document.querySelector(sel);
opts.forEach(function (el) {
    selel.append(el);
});
document.querySelector(sel + " option:nth-child(1)").setAttribute("selected", "selected");

Обновлено : теперь для select-элемента используется селектор select.select__control