Как сделать выбранную опцию шириной текущего текста выбранного варианта?

Question

Я пытаюсь сделать опцию Select Option шириной текущего выбранного параметра.

Мой код является стандартом HTML для Select Option выпадающего списка:

<select name="search_options"> 
    <option value="all">All</option> 
    <option value="entertainment">Entertainment</option> 
    <option value="newsandpolitics">News &amp; Politics</option> 
    <option value="sports">Sports</option> 
    <option value="lifestyle">Lifestyle</option> 
    <option value="health">Health</option> 
    <option value="scienceandtech">Science &amp; Tech</option> 
</select> 

Я пытался сделать это с помощью только CSS или Javascript, без JQuery, и я не могу понять это.

Я уже нашел несколько скриптов с JQuery, но не CSS/Javascript.

http://jsfiddle.net/5AANG/4/

http://jsfiddle.net/qqcc5/

Есть ли способ для достижения этой цели, одинаковые с указанными выше 2 скрипками, используя только CSS или чистый Javascript?

Любые указатели в правильном направлении были бы замечательными.

Answer 1

Основываясь на второй ссылке вы можете сделать это следующим образом:

var selectId = document.getElementById("yourSelect"); 

selectId.onchange=function(){ 
    var selectedValue = selectId.options[selectId.selectedIndex].value; 
    var selectedText = selectId.options[selectId.selectedIndex].text; 

    selectId.style.width = 20 + (selectedText.length * 8) + "px"; 
} 

Тест: http://jsfiddle.net/ndquxquu/

Answer 2

Преобразование в JavaScript и объяснить свой первый пример (http://jsfiddle.net/5AANG/4/).

Это создает временный элемент <span> и копирует стили из поля выбора в диапазон. Затем он измеряет ширину пролета, устанавливает ширину окна выбора на основе этой ширины и удаляет диапазон из документа.

В простой старый JavaScript:

захватить все <select> s:

var selects = document.querySelectorAll('select'); 

Добавить наш слушатель событий (как определено ниже) для каждого:

for (var i = 0; i < selects.length; i++) { 
    selects[i].addEventListener('change', changeWidth); 
} 

Определение слушателя событий:

function changeWidth (e) { 

Базовые определения переменных:

var select = e.target; 
    var o = select.options[select.selectedIndex]; 
    var s = document.createElement('span'); 

Установите содержание нашего временного промежутка (s) к содержанию выбранного варианта:

s.textContent = o.textContent; 

забавная часть! Присвоение <span> стилей выбранной опции.(См getComputedStyle)

var ostyles = getComputedStyle(o); 
    s.style.fontFamily = ostyles.fontFamily; 
    s.style.fontStyle = ostyles.fontStyle; 
    s.style.fontWeight = ostyles.fontWeight; 
    s.style.fontSize = ostyles.fontSize; 

Append промежутка к документу, чтобы мы могли захватить его ширину:

document.body.appendChild(s); 

Установите ширину <select> «s, основанную на ширине пролета (30 является магическим числом вытащили из вышеупомянутая скрипка).

select.style.width = (s.offsetWidth + 30) + 'px'; 

Quick! Удалите временный промежуток, прежде чем кто-нибудь его увидит!

document.body.removeChild(s); 
} 

Демо: https://jsfiddle.net/Hatchet/a0xzz6mf/