时间戳

首页 > 解决方案 > 下拉占位符分隔符

javascript - 下拉占位符分隔符

问题描述

我希望在我的select下拉列表中有一个分隔符，例如：

<select name="season" class="season">
    <option value="">Select season</option>
    {% for season in search_item.get_seasons %}
        <option value="{{ season }}">{{ season }}</option>
    {% endfor %}
    <option>---------------------------</option>
    <option value="-1">I need to create a new season for this item</option>
</select>

有没有办法用最长选项的宽度创建一个值？例如，我希望--------分隔线具有最长值的（近似）宽度。有没有办法做到这一点？

标签： javascripthtmlcss

解决方案

是的，这是可能的，前提是您不介意在您的行中有一点“间距”。

考虑到您已经拥有search_item.get_seasons，您可以.length在每个项目上运行season以找出哪个是最长的，方法是遍历每个项目并覆盖一个变量，如果当前项目有更长的.length。从这里您可以简单地将.innerHTML相关的<select>设置为等于-乘以该变量（现在包含.length最长项目的）。我曾经.repeat()报道过。

请注意，您需要使用等宽字体（例如 Courier）以获得最佳效果。

这可以在下面看到：

const items = [
  "A season",
  "A really, really long season",
  "Short season"
];

let longest = 0;

for (let i = 0; i < items.length; i++) {
  if (items[i].length > longest) {
    longest = items[i].length;
  }
}

const element = document.querySelector('.line');
element.innerHTML = "-".repeat(longest);
select {
  font-family: Courier;
}
<select name="season" class="season">
  <option value="">Select season</option>
  <option value="">A season</option>
  <option value="">A really, really long season</option>
  <option value="">Short season</option>
  <option class="line"></option>
  <option value="-1">I need to create a new season for this item</option>
</select>

推荐阅读