javascript - 根据文本长度调整下拉框的宽度

Question

我有一个下拉选项。这是我的代码 -

    <span class="header"> COMPARE </span>
        <span class="dropdown">
            <select class="select_box" id="opts">
                <p></p>
                <option value="default">Select a dataset</option>
                <option value="population">POPULATION</option>
                <option value="popdensityperacre">POPULATION DENSITY</option>
                <option value="percapitaincome">INCOME</option>
            <option value="percentnonwhite">RACIAL DIVERSITY</option>
            <option value="percentinpoverty">POVERTY</option>
            <option value="medianhomevalue">HOME VALUE</option>
            <option value="unemploymentrate">UNEMPLOYMENT</option>
            <option value="percapitacriminalarrests">CRIME</option>
            <option value="percapitaencampments">HOMELESSNESS</option>
            <option value="medianhoursofsummerfog">FOG</option>
            <option value="percentinliquefaction">LIQUEFACTION</option>
            </select>
        </span>
        <span class="header"> BY NEIGHBORHOOD </span>

现在，下拉框的宽度设置为最大项的宽度(人口密度)。我怎样才能使下拉菜单的宽度针对每个选项动态调整？具体来说，当下拉列表是静态的且未被选中时。

Answer 1

首先，span - 一个内联元素，因此您最好使用 div。将 block 或内联 block 元素放在内联元素中是一种不好的做法。

如上所述，为此使用一些库要好得多。

然后就可以使用这样的脚本了。根据初始选择宽度和最宽选项的宽度计算的选项宽度。

findMaxLengthOpt 正在寻找文本内容最长的选项。使用一个spread 运算符，将元素的 HTMLCollection 转换为数组，因此我们可以使用 Array 方法，例如 reduce。此运算符从可迭代对象中获取元素并将它们放入新数组中。

阅读此 docs还有这个tutorial .

let selectList = document.querySelector("#opts")
// get initial width of select element. 
// we have to remember there is a dropdown arrow make it a little wider
let initialWidth = selectList.offsetWidth
// get text content length (not a value length) of widest option. 
let maxOptValLen = findMaxLengthOpt(selectList)
// calc width of single letter 
let letterWidth = initialWidth / maxOptValLen
let corCoef = 1.875; // Based on visual appearance
console.log(initialWidth, maxOptValLen)

selectList.addEventListener("change", e => {
  let newOptValLen = getSelected(e.target).textContent.length
  let correction = (maxOptValLen - newOptValLen) * corCoef
  let newValueWidth = (newOptValLen * letterWidth) + correction
  console.log('new width', newValueWidth, 'new option len', newOptValLen)
  e.target.style.width = newValueWidth + "px"
}, false);


function getSelected(selectEl) {
  return [...selectEl.options].find(o => o.selected)
}

function findMaxLengthOpt(selectEl) {
  return [...selectEl.options].reduce((result, o) => o.textContent.length > result ? o.textContent.length : result, 0)
}

<div class="header">
  <p>COMPARE
    <select class="select_box" id="opts">
      <option value="">Select a dataset</option>
      <option value="population">POPULATION</option>
      <option value="popdensityperacre">POPULATION DENSITY</option>
      <option value="percapitaincome">INCOME</option>
      <option value="percentnonwhite">RACIAL DIVERSITY</option>
      <option value="percentinpoverty">POVERTY</option>
      <option value="medianhomevalue">HOME VALUE</option>
      <option value="unemploymentrate">UNEMPLOYMENT</option>
      <option value="percapitacriminalarrests">CRIME</option>
      <option value="percapitaencampments">HOMELESSNESS</option>
      <option value="medianhoursofsummerfog">FOG</option>
      <option value="percentinliquefaction">LIQUEFACTION</option>
    </select>
    BY NEIGHBORHOOD </p>
</div>