Как заставить тег Select динамически менять свой размер

Рейтинг: 0Ответов: 1Опубликовано: 02.04.2023

Задача сделать тег Select что бы он принимал размер выбранной опции. Скажем есть код

<select id="orient">
    <option value="op">Много слово очень много слов, прям очень много</option>
    <option value="ol">Мало слов </option>
</select>

При выборе опции op размер тега должен быть равен этой опции. Ну а при выборе ol размер тега должен быть в разы меньше. Знаю что по умолчанию размер тега select равен размеру самой большой его опции. Как это обойти?

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

Как это обойти?

Колхозить.

document.querySelector('#orient').addEventListener('change', function(e) {
  var target = e.target;
  var ghost = document.createElement('span'); // создаём элемент
  
  ghost.textContent = target.options[target.selectedIndex].textContent; // добавляем туда текст
  ghost.style.font = getComputedStyle(target).font; // задаём такие же стили текста, как у селекта, чтобы правильно считался размер
  ghost.style.visibility = 'collapse'; // Скрываем с глаз долой, на всякий пожарный.
  document.body.append(ghost); // Добавляем на страницу
  target.style.width = ghost.getBoundingClientRect().width + 30 +'px'; // Получаем ширину текста + 30 (длина стрелки) и всё это ставим в ширину селекта
  
  ghost.remove(); // Удаляем элмент, он нам больше не нужен.
})
<select id="orient">
  <option value="op">Много слово очень много слов, прям очень много</option>
  <option value="ol">Мало слов </option>
</select>

Описание в комментариях к коду.