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>

现在，下拉框的宽度设置为最大项目（population density）的宽度。我如何才能使下拉菜单的宽度针对每个选项动态调整？具体来说，当下拉列表为静态且未选中时。

Answer 1

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

如上所述，最好使用一些库。

然后您可以使用此类脚本。选项的宽度是根据初始选择宽度和最宽选项的宽度计算的。

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

阅读此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>

根据文本的长度调整下拉菜单的宽度

1 个答案: