Динамически размер списка выбора (Safari)

Question

Я хотел бы выбрать список выбора в зависимости от ширины, необходимой для выбранного индекса (строки). Скажем, например, у меня есть список с 3 строками, короткий, средний, loooooong; Я не хочу, чтобы список выбора автоматически был таким же широким, как и его самый большой элемент, но он должен быть таким же широким, как и выбранный элемент.

Первый метод, который я пробовал: document.getElementById('selectList').style.width = (selectedText.length * 6) + 'px'; где selectedText - строка, а 6 - плохая оценка ширины символа. Без моноширинного шрифта это работает неправильно.

Следующий методом, который я попытался был установить innerHTML из выключенного экрана DIV (вверху: -9999px) к выбранному индексу, а затем: document.getElementById('selectList').style.width = document.getElementById('hiddenDiv').offsetWidth; Проблемы этого метода состоит в том, что ширина тоже не правильно, некоторые действительно длинные строки сделали путь списка выбора длинным по сравнению с фактической выбранной строкой.

Любые идеи о том, как я могу динамически сортировать этот список выбора на основе ширины/длины строки?

Answer 1

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

Demo