Как сделать сортировку Select Option по своему массиву?

Question

[Suleimanov_Ismar]

Пожалуйста подскажите, как сделать сортировку по своему массиву.
Данные не должны быть перезаписаны или удалены. Должен быть эффект перемещения в соответствии с массивом.

Например:
У меня есть данные Select =>

<select name="id_car_mark">
<option value="1" data-select2-id="8">AC</option>
<option value="2" data-select2-id="9">Acura</option>
<option value="3" data-select2-id="10">Alfa Romeo</option>
<option value="4" data-select2-id="11">Alpine</option>
<option value="6" data-select2-id="12">Ariel</option>
<option value="7" data-select2-id="13">Aro</option>
<option value="8" data-select2-id="14">Asia</option>
<option value="9" data-select2-id="15">Aston Martin</option>
<option value="10" data-select2-id="16">Audi</option>
<option value="11" data-select2-id="17">Austin</option>
<option value="15" data-select2-id="18">Bentley</option>
<option value="21" data-select2-id="20">Brilliance</option>
<option value="22" data-select2-id="21">Bristol</option>
<option value="24" data-select2-id="22">Bugatti</option>
<option value="25" data-select2-id="23">Buick</option>
<option value="37" data-select2-id="34">Citroen</option>
<option value="26" data-select2-id="24">BYD</option>
<option value="28" data-select2-id="25">Cadillac</option>
<option value="29" data-select2-id="26">Callaway</option>
<option value="30" data-select2-id="27">Carbodies</option>
<option value="31" data-select2-id="28">Caterham</option>
<option value="32" data-select2-id="29">Changan</option>
и так далее ... список очень большой.
</select>

Есть массив по которому он должен сортироваться =>
То есть сначала должны вывестись эти данные а потом все остальное.

var blackList = [
	'Audi',
	'BMW',
	'Chevrolet',
	'Deawoo',
	'Daihatsu',
	'Dodge',
	'Ford',
	'Hoda',
	'Hummer',
	'Hyundai',
	'Infiniti',
	'Jeep',
	'JMC',
	'Kia',
	'Land Rover',
	'Lexus',
	'Lifan',
	'Mazda',
	'Mercedes-Benz',
	'MINI',
	'Mitsubishi',
	'Nissan',
	'Opel',
	'Puegeot',
	'Porscje',
	'Ravon',
	'Renault',
	'Skoda',
	'Subaru',
	'Suzuki',
	'Toyota',
	'Volkswagen',
	'ВАЗ (Lada)',
];

Нужно на выходе получить такой результат =>

<select name="id_car_mark">
<option value="1" data-select2-id="8">Audi</option>
<option value="2" data-select2-id="9">BMW</option>
<option value="3" data-select2-id="10">Alfa Chevrolet</option>
<option value="4" data-select2-id="11">Deawoo</option>
<option value="6" data-select2-id="12">Daihatsu</option>
<option value="7" data-select2-id="13">Dodge</option>
<option value="8" data-select2-id="14">Ford</option>
<option value="9" data-select2-id="15">Aston Hoda</option>
<option value="10" data-select2-id="16">Hummer</option>
<option value="11" data-select2-id="17">Hyundai</option>
<option value="15" data-select2-id="18">Infiniti</option>
<option value="21" data-select2-id="20">Jeep</option>
<option value="22" data-select2-id="21">JMC</option>
<option value="24" data-select2-id="22">Kia</option>
<option value="25" data-select2-id="23">Land Rover</option>
<option value="37" data-select2-id="34">Lexus</option>
<option value="26" data-select2-id="24">Lifan</option>
<option value="28" data-select2-id="25">Mazda</option>
<option value="29" data-select2-id="26">Mercedes-Benz</option>
<option value="30" data-select2-id="27">MINI</option>
<option value="31" data-select2-id="28">Mitsubishi</option>
<option value="32" data-select2-id="29">Nissan</option>
далее выводится остальной список.
</select>

Подскажите пожалуйста как такое реализовать?

P.s. Теги все нужны, они должны остаться. Код должен существующий список отсортировать по значениям из массива путем перемещения существующего списка.

Comments

[Сергей Соколов]

Атрибуты более не нужны? Точно?
value="10" data-select2-id="16"

[Suleimanov_Ismar]

Сергей Соколов, нужны, это просто пример, нужно чтобы она сначала нашла есть ли в Select такие значения как в массиве потом, если есть то перекинуть на вверх в соответствии с массивом

Answer 1

[0xD34F]

const select = document.querySelector('[name="id_car_mark"]');

Добавляем в начало то, что есть в blackList:

const options = Object.fromEntries(Array.from(select, n => [ n.innerText, n ]));
select.prepend(...blackList.reduce((acc, n) => ((n = options[n]) && acc.push(n), acc), []));

Или, в конец то, чего нет:

select.append(...Array.prototype.filter.call(select, function(n) {
  return !this.has(n.textContent);
}, new Set(blackList)));

Comments

[Suleimanov_Ismar]

Спасибо большое, в первый раз не правильно сформировал вопрос. Спасибо большое