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

Question

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

我的代码是选择选项下拉菜单的标准 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

转换为 JavaScript 并解释您的第一个示例 (http://jsfiddle.net/5AANG/4/)。

这会创建一个临时的<span> 元素并将样式从选择框复制到跨度。然后它测量 span 的宽度，根据该宽度设置选择框的宽度，并从文档中删除 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');

将我们的临时 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;

将 span 附加到文档中，以便我们获取它的宽度：

    document.body.appendChild(s);

根据 span 的宽度设置 <select> 的宽度（30 是从上面提到的小提琴中提取的一个幻数）。

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

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

    document.body.removeChild(s);
}

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

Answer 2

根据您的第二个链接，您可以这样做：

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 3

我为另一个线程写了这个答案，该线程刚刚作为这个线程的副本关闭。这些答案的问题是它们有点复杂并且使用硬编码的填充值，这可能是不可靠的。这是我的解决方案，不需要任何硬编码。

---

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

虚拟选择基本上只是一种衡量它应该有多宽的可靠方法。

将该逻辑添加到“更改”中，它应该很好，手动触发一次，那么你应该很好。

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>