javascript - 如何使选定选项的宽度为当前选定选项的文本宽度？

Question

我正在尝试使选择选项具有当前选定选项的宽度。

我的代码是选择选项下拉菜单的标准 HTML:

<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 fiddle ，但没有 CSS/Javascript fiddle 。

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

http://jsfiddle.net/qqcc5/

有什么方法可以实现这一点，与上述 2 个 fiddle 相同，仅使用 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/