根据文本的长度调整下拉列表的宽度
根据文本的长度调整下拉列表的宽度
提问于 2019-03-15 09:21:45
我有一个下拉选项。这是我的代码-
<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)的宽度。如何才能使下拉菜单的宽度为每个选项动态调整？具体地说，当下拉列表是静态的且未被选中时。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-15 10:43:35
首先，span -一个内联元素，所以你最好使用div。将block或inline-block元素放在inline元素中是一种不好的做法。
如上所述，最好使用一些库。
然后你就可以使用这样的脚本了。根据初始选择宽度计算的选项宽度和最宽选项的宽度。
findMaxLengthOpt正在寻找文本内容最长的选项。这里使用扩展运算符，将元素的HTMLCollection转换为数组，因此我们可以使用方法，如reduce。这个操作符从可迭代对象中获取元素，并将它们放入一个新的数组中。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55174282
复制相关文章
相似问题