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

在普通的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;

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

    document.body.appendChild(s);

根据跨度的宽度设置<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>

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

3 个答案: