0

Screen

Мне нужно сделать так, чтоб тэг optgroup динамически оборачивал тэги option, а значением его был первый символ текста в option. То есть должна получиться такая разметка. Как это сделать в JS?

<select id="select">
    <optgroup label="A">
        <option value="1">Andromed</option>
        <option value="2">AnkosiManila</option>
    <optgroup>
    <optgroup label="B">
        <option value="3">Backend</option>
        <option value="4">Bravisiimo</option>
    </optgroup>
    <optgroup label="C">
        <option value="5">Cokolada</option>
        <option value="6">Cerny</option>
    </optgroup>
    <optgroup label="M">
        <option value="7">Mapping</option>
        <option value="8">Marroni</option>
    </optgroup>
    <optgroup label="N">
        <option value="9">NugetPack</option>
    </optgroup>
    <optgroup label="J">
        <option value="10">Jaguar</option>
    </optgroup>
</select>

Благодарю

1 ответ 1

2

function group(select) {
  const oldGroups = select.querySelectorAll('optgroup');
  
  for (const group of oldGroups) {
    const options = group.querySelectorAll('option');
    select.appendChild(select);
    select.removeChild(group);
  }
  
  const options = select.querySelectorAll('option');
  
  const groups = {};
  for (const option of options) {
    const firstLetter = option.innerText[0];
    if (firstLetter) {
      if (!groups.hasOwnProperty(firstLetter)) {
        groups[firstLetter] = [];
      }
      groups[firstLetter].push(option);
    }
  }
  
  for (const letter of Object.keys(groups)) {
    const group = document.createElement('optgroup');
    group.label = letter;
    select.appendChild(group);

    for (const option of groups[letter]) {
      group.appendChild(option);
    }
  }
}

const $select = document.querySelector('#select');
group($select);
<select id="select">
        <option value="1">Andromed</option>
        <option value="2">AnkosiManila</option>
        <option value="3">Backend</option>
        <option value="4">Bravisiimo</option>
        <option value="5">Cokolada</option>
        <option value="6">Cerny</option>
        <option value="7">Mapping</option>
        <option value="8">Marroni</option>
        <option value="9">NugetPack</option>
        <option value="10">Jaguar</option>
</select>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.