如何使“選定選項”與當前“選定選項”文本的寬度相同？

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的小提琴，但是沒有CSS / Javascript的小提琴。

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

http://jsfiddle.net/qqcc5/

是否有任何方法可以使用CSS或純Javascript與上述2個小提琴相同？

任何指向正確方向的指針都將是很好的。

Answer 1

轉換為JavaScript並說明您的第一個示例（ http://jsfiddle.net/5AANG/4/ ）。

這將創建一個臨時的<span>元素，並將樣式從選擇框復制到該范圍。 然后，它測量跨度的寬度，基於該寬度設置選擇框的寬度，然后從文檔中刪除跨度。

在普通的舊JavaScript中：

抓住所有<select> ：

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>