Задать вопрос
Flakelf
@Flakelf
javascript

Как сортировать option по атрибуту?

Сап, б.

Есть функция, которая сортирует элементы с тегом option внутри select:

function sort(desc, attrType, lastUpdated = false) {
    console.log('clicked')
    const parentNode = document.getElementById('search-sort-field');
    const childNode = document.getElementById('search-sort-field').children;
    [].slice.call(childNode).sort(function (a, b) {
        if (desc) {
            if (a.getAttribute(attrType) > b.getAttribute(attrType)) return -1;
            if (a.getAttribute(attrType) < b.getAttribute(attrType)) return 1;
            return 0;
        } else {
            if (a.getAttribute(attrType) > b.getAttribute(attrType)) return 1;
            if (a.getAttribute(attrType) < b.getAttribute(attrType)) return -1;
            return 0;
        }
    }).forEach((val) => {
        console.log(val);
        parentNode.appendChild(val);
        if (lastUpdated) {
            if (val.attributes.s_mod.value == 0) {
                val.setAttribute('selected', true);
                lastUpdated = false;
            }
        } else {
            val.removeAttribute('selected');
        }
        
    });
    childNode[0].setAttribute('selected', true);
}

document.getElementById('date_sort').addEventListener('click', () => sort(true, 's_date'));
document.getElementById('date_sort_desc').addEventListener('click', () => sort(false, 's_date'));
document.getElementById('size_sort').addEventListener('click', () => sort(true, 's_size'));
document.getElementById('size_sort_desc').addEventListener('click', () => sort(false, 's_size'));
// document.getElementById('id_sort').addEventListener('click', () => sort(true, 's_id'));
// document.getElementById('id_sort_desc').addEventListener('click', () => sort(false, 's_id'));
document.getElementById('s_mod_sort').addEventListener('click', () => sort(true, 's_id', true));


Вот сам select

<select size="20" name="file" id="search-sort-field">
            <option value="22108" s_id="22108" s_date="22108" s_size="1015808" s_mod="0">value="22108"
                s_id="22108" s_date="22108"
                s_size="1015808" s_mod="0"</option>
            <option value="22258" s_id="22258" s_date="22258" s_size="1572864" s_mod="0">value="22258"
                s_id="22258" s_date="22258"
                s_size="1572864" s_mod="0"</option>
            <option value="22263" s_id="22263" s_date="22263" s_size="1048576" s_mod="0">value="22263"
                s_id="22263" s_date="22263"
                s_size="1048576" s_mod="0"</option>
            <option value="22269" s_id="22269" s_date="22269" s_size="2097152" s_mod="1">value="22269"
                s_id="22269" s_date="22269"
                s_size="2097152" s_mod="1"</option>
            <option value="22270" s_id="22270" s_date="22270" s_size="2097152" s_mod="1">value="22270"
                s_id="22270" s_date="22270"
                s_size="2097152" s_mod="1"</option>
            <option value="22271" s_id="22271" s_date="22271" s_size="2097152" s_mod="1">value="22271"
                s_id="22271" s_date="22271"
                s_size="2097152" s_mod="1"</option>
            <option value="22273" s_id="22273" s_date="22273" s_size="2097152" s_mod="1">value="22273"
                s_id="22273" s_date="22273"
                s_size="2097152" s_mod="1"</option>
            <option value="22279" s_id="22279" s_date="22279" s_size="393216" s_mod="0">value="22279"
                s_id="22279" s_date="22279"
                s_size="393216" s_mod="0"</option>
            <option value="22282" s_id="22282" s_date="22282" s_size="1015808" s_mod="1">value="22282"
                s_id="22282" s_date="22282"
                s_size="1015808" s_mod="1"</option>
            <option value="22283" s_id="22283" s_date="22283" s_size="1015808" s_mod="1">value="22283"
                s_id="22283" s_date="22283"
                s_size="1015808" s_mod="1"</option>
            <option value="22284" s_id="22284" s_date="22284" s_size="1015808" s_mod="1">value="22284"
                s_id="22284" s_date="22284"
                s_size="1015808" s_mod="1"</option>
            <option value="22285" s_id="22285" s_date="22285" s_size="1015808" s_mod="1">value="22285"
                s_id="22285" s_date="22285"
                s_size="1015808" s_mod="1"</option>
            <option value="22286" s_id="22286" s_date="22286" s_size="1015808" s_mod="1">value="22286"
                s_id="22286" s_date="22286"
                s_size="1015808" s_mod="1"</option>
            <option value="22287" s_id="22287" s_date="22287" s_size="1015808" s_mod="1">value="22287"
                s_id="22287" s_date="22287"
                s_size="1015808" s_mod="1"</option>
            <option value="22288" s_id="22288" s_date="22288" s_size="1015808" s_mod="1">value="22288"
                s_id="22288" s_date="22288"
                s_size="1015808" s_mod="1"</option>
            <option value="22289" s_id="22289" s_date="22289" s_size="1015808" s_mod="1">value="22289"
                s_id="22289" s_date="22289"
                s_size="1015808" s_mod="1"</option>
            <option value="22290" s_id="22290" s_date="22290" s_size="1015808" s_mod="1">value="22290"
                s_id="22290" s_date="22290"
                s_size="1015808" s_mod="1"</option>
            <option value="22291" s_id="22291" s_date="22291" s_size="1015808" s_mod="1">value="22291"
                s_id="22291" s_date="22291"
                s_size="1015808" s_mod="1"</option>
            <option value="22292" s_id="22292" s_date="22292" s_size="1015808" s_mod="1">value="22292"
                s_id="22292" s_date="22292"
                s_size="1015808" s_mod="1"</option>
            <option value="22293" s_id="22293" s_date="22293" s_size="1015808" s_mod="1">value="22293"
                s_id="22293" s_date="22293"
                s_size="1015808" s_mod="1"</option>
            <option value="22294" s_id="22294" s_date="22294" s_size="1015808" s_mod="1">value="22294"
                s_id="22294" s_date="22294"
                s_size="1015808" s_mod="1"</option>
            <option value="22295" s_id="22295" s_date="22295" s_size="1015808" s_mod="1">value="22295"
                s_id="22295" s_date="22295"
                s_size="1015808" s_mod="1"</option>
            <option value="22296" s_id="22296" s_date="22296" s_size="1015808" s_mod="1">value="22296"
                s_id="22296" s_date="22296"
                s_size="1015808" s_mod="1"</option>
            <option value="22297" s_id="22297" s_date="22297" s_size="1015808" s_mod="1">value="22297"
                s_id="22297" s_date="22297"
                s_size="1015808" s_mod="1"</option>
            <option value="22298" s_id="22298" s_date="22298" s_size="1015808" s_mod="1">value="22298"
                s_id="22298" s_date="22298"
                s_size="1015808" s_mod="1"</option>
            <option value="22299" s_id="22299" s_date="22299" s_size="1015808" s_mod="1">value="22299"
                s_id="22299" s_date="22299"
                s_size="1015808" s_mod="1"</option>
            <option value="22300" s_id="22300" s_date="22300" s_size="1015808" s_mod="1">value="22300"
                s_id="22300" s_date="22300"
                s_size="1015808" s_mod="1"</option>
            <option value="22301" s_id="22301" s_date="22301" s_size="1015808" s_mod="1">value="22301"
                s_id="22301" s_date="22301"
                s_size="1015808" s_mod="1"</option>
            <option value="22302" s_id="22302" s_date="22302" s_size="1015808" s_mod="1">value="22302"
                s_id="22302" s_date="22302"
                s_size="1015808" s_mod="1"</option>
            <option value="22303" s_id="22303" s_date="22303" s_size="1015808" s_mod="1">value="22303"
                s_id="22303" s_date="22303"
                s_size="1015808" s_mod="1"</option>
        </select>


Вот тут можно потыкать
o9997932.beget.tech


Собственно, оно не работает, точней работает, но почему-то считает, что 393216 больше, чем 2097152.

Что я сделал не так и как пофиксить?
  • Вопрос задан
  • 131 просмотр
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Значения атрибутов - это строки. Надо при сравнении преобразовывать их в числа.

UPD. Ну и в целом - многословно как-то у вас. Можно же гораздо короче:

function sort(desc, attrName) {
  const select = document.querySelector('#search-sort-field');
  select.append(...Array
    .from(select.children, n => [ n, +n.getAttribute(attrName) ])
    .sort((a, b) => (a[1] - b[1]) * (desc ? 1 : -1))
    .map(n => n[0])
  );
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Ошибка при создании контейнера - C++ и Assembler
27 апр. 2024, в 15:07
15000 руб./за проект
Автоматизация действий в АНТИДЕТЕКТ браузере (Dolphyne-anty)
27 апр. 2024, в 14:51
20000 руб./за проект
Доработать парсер на питоне селениум
09 апр. 2024, в 14:34
10000 руб./за проект
Ещё заказы