Как можно сгенерировать option group через Js?

261

14 сентября 2018, 10:20

Передомной стоит проблема, нет доступа к редактированию Html разметки по определенным причинам, но нужно объеденить options из select в тэг optiongroup, к примеру, у меня есть пункты:

<select>
  <option data-group="first" value="test1">
  <option data-group="first" value="test2">
  <option data-group="second" value="test3">
</select>

Мне нужно преобразовать в:

<select>
  <optgroup label="first">
    <option data-group="first" value="test1">
    <option data-group="first" value="test2">
  </optgroup>
  <optgroup label="second">
    <option data-group="second" value="test3">
  </optgroup>
</select>

Проблема еще в том что этот селект кастомизирован через бутстрап. Возможно ли сделать такое через Js?

Answer 1

var groups = {}; 
 
//собираем элементы по группам 
$('option[data-group]').each(function(i, el) { 
  var group = $(el).data('group'); 
  if (!groups.hasOwnProperty(group)) groups[group] = []; 
  groups[group].push(el); 
}); 
 
//оборачиваем в новый тег 
for (var group in groups) { 
  $(groups[group]).wrapAll('<optgroup label="' + group + '"/>'); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select> 
  <option data-group="first" value="test1">test1</option> 
  <option data-group="first" value="test2">test2</option> 
  <option data-group="second" value="test3">test3</option> 
</select>