Как с помощью jquery сгруппировать option в optgroup?

Question

[Сергей]

Как обернуть тегом optgroup теги option, у которых схожий атрибут data-mark?

<select name="auto_model" class="form-control">
<option value="" data-mark="not" selected="">Выберите из списка</option>
<option value="Audi||A6, III (C6) Рестайлинг" data-mark="Audi" class="">A6, III (C6) Рестайлинг</option>
<option value="BMW||X3, II (F25)" data-mark="BMW" class="">X3, II (F25)</option>
<option value="Chery||Tiggo (T11), I" data-mark="Chery" class="">Tiggo (T11), I</option>
<option value="Chevrolet||Cruze, I" data-mark="Chevrolet" class="">Cruze, I</option>
<option value="Chevrolet||Cruze, I Рестайлинг" data-mark="Chevrolet" class="">Cruze, I Рестайлинг</option>
<option value="Chevrolet||Lacetti, Lacetti" data-mark="Chevrolet" class="">Lacetti, Lacetti</option>
<option value="Chevrolet||Niva, I Рестайлинг" data-mark="Chevrolet" class="">Niva, I Рестайлинг</option>
<option value="Citroen||C5, II" data-mark="Citroen" class="">C5, II &nbsp;(1)</option>
<option value="Ford||EcoSport, I" data-mark="Ford" class="">EcoSport, I</option>
<option value="Ford||Fiesta, Mk5" data-mark="Ford" class="">Fiesta, Mk5</option>
<option value="Great Wall||Hover H5, Hover H5" data-mark="Great Wall" class="">Hover H5, Hover H5</option>
<option value="Honda||CR-V, III Рестайлинг" data-mark="Honda" class="">CR-V, III Рестайлинг </option>
<option value="Hyundai||Creta, I" data-mark="Hyundai" class="">Creta, I &nbsp;(2)</option>
<option value="Hyundai||Elantra, III (XD2) Рестайлинг" data-mark="Hyundai" class="">Elantra, III (XD2) Рестайлинг </option>
<option value="Hyundai||Grandeur, V" data-mark="Hyundai" class="">Grandeur, V </option>
<option value="Hyundai||ix35, I Рестайлинг" data-mark="Hyundai" class="">ix35, I Рестайлинг </option>
<option value="Hyundai||Santa Fe, III Рестайлинг" data-mark="Hyundai" class="">Santa Fe, III Рестайлинг</option>
</select>

var select_map = {};
    $('select[name=auto_model] option').each(function () {
        if (select_map[$(this).attr('data-mark')]) {
        }else if($(this).attr('data-mark')!=='not'){
            $(this).before('<optgroup label="'+$(this).attr('data-mark')+'">');
        }
        select_map[$(this).attr('data-mark')] = true;
    });

Answer 1

[hzzzzl]

за jquery не скажу, но

Answer 2

[0xD34F]

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

const groups = [...select.options].reduce((acc, n) => (
  n.value && (acc[n.dataset.mark] = acc[n.dataset.mark] || []).push(n),
  acc
), {});

Object.entries(groups).forEach(n => {
  const optgroup = document.createElement('optgroup');
  optgroup.label = n[0];
  optgroup.append(...n[1]);
  select.append(optgroup);
});