javascript - 下拉占位符分隔符

Question

我希望在我的 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>

有没有办法创建一个具有最长选项宽度的值？例如，我希望 -------- 分隔符具有其中最长值的(近似)宽度。有办法做到这一点吗？

Answer 1

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

考虑到您已经拥有 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>