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

Question

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

我的代码是 Select 选项下拉列表的标准 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 的小提琴，但是没有 CSS/Javascript 的。

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

http://jsfiddle.net/qqcc5/

有什么方法可以实现这一点，与上述 2 个小提琴相同，只使用 CSS 或纯 Javascript？

任何正确方向的指示都会很棒。

Answer 1

根据你的第二个 link 你可以这样做：

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> 元素并将样式从 select 框中复制到跨度。然后它测量跨度的宽度，根据该宽度设置 select 框的宽度，并从文档中删除跨度。

老式 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) 的内容设置为 selected 选项的内容：

    s.textContent = o.textContent;

有趣的部分！为 <span> 分配 selected 选项的样式。（参见 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;

将 span 附加到文档，以便我们可以获取其宽度：

    document.body.appendChild(s);

根据 span 的宽度设置 <select> 的宽度（30 是从上述 fiddle 中提取的幻数）。

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

快！在任何人看到之前删除临时跨度！

    document.body.removeChild(s);
}

演示：https://jsfiddle.net/Hatchet/a0xzz6mf/

Answer 3

我为另一个线程写了这个答案，这个线程刚刚作为这个线程的副本而关闭。这些答案的问题在于它们有点复杂并且使用 hard-coded 填充值，这可能不可靠。这是我的解决方案，不需要任何东西 hard-coded.

虽然没有 CSS 和 HTML 唯一的方法，但相当 straight-forward 的方法是创建一个隐藏的 select，设置它的唯一选择值的选项，然后采用该宽度并将其设置为可见 select。

虚拟 select 基本上只是一种可靠的测量宽度的方法。

把那个逻辑加到"change"应该就可以了，手动触发一次就可以了。

const select = document.querySelector('select');
select.addEventListener('change', function() {
  const dummySelect = document.createElement('select');
  dummySelect.classList.add('dummy');
  
  const dummyOption = document.createElement('option');
  dummyOption.innerHTML = this.value;
  dummySelect.appendChild(dummyOption);
  
  document.body.appendChild(dummySelect);
  select.style.width = `${dummySelect.offsetWidth}px`;
  
  document.body.removeChild(dummySelect);
});

// Trigger for the first time
select.dispatchEvent(new Event('change'));

select {
  display: inline;
}

.dummy {
  position: absolute;
  left: -10000px;
}

<select>
 <option>A</option>
 <option>A much longer title</option>
 <option>Middleground</option>
</select>

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

How to make the Selected Option the width of the current Selected Option's text?

javascript

html

css

html-select

option