如何限制 HTML <select> 下拉列表中的可见选项？答案

【问题标题】：How can I limit the visible options in an HTML <select> dropdown?如何限制 HTML <select> 下拉列表中的可见选项？
【发布时间】：2021-01-21 18:14:53
【问题描述】：

如何限制 HTML <select> 下拉菜单中显示的选项数量？

例如：

    <select>
    <option value="1">1</option>
    <option value="2">2</option>
    ...
    <option value="20">20</option>
    </select>

如何让浏览器只显示前五个选项并向下滚动显示其余选项？

【问题讨论】：

谢谢！不幸的是， size 属性不是我想要的，因为它使所有 x 选项都可见。我试图避免使用 javascript 来解决这样一个小但烦人的问题。但是，我似乎别无选择。
是的。我个人从未将其视为问题，因为所有<select>s 在网络上都以这种方式工作。但是，如果您需要它，恐怕您将不得不使用 JavaScript 构建自己的。
我永远无法理解浏览器制造商是如何构建 WebComponents 之类的，而且他们似乎无法解决如此简单的问题。有没有任何开发人员说过“嗯，我想限制我的选择下拉列表中显示的元素数量......那个丑陋的 list-y 东西就可以了！”
@Petrov：那么，网页作者如此精确地控制下拉列表的显示的迫切需要是什么？操作系统不能很好地解决它吗？
下拉列表通常会太长，使列表变得非常笨拙。并且在某些情况下会被可见屏幕截断，因为它做得不对。

标签： html drop-down-menu

【解决方案1】：

你可以试试这个

<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;">
             <option value="1">This is select number 1</option>
             <option value="2">This is select number 2</option>
             <option value="3">This is select number 3</option>
             <option value="4">This is select number 4</option>
             <option value="5">This is select number 5</option>
             <option value="6">This is select number 6</option>
             <option value="7">This is select number 7</option>
             <option value="8">This is select number 8</option>
             <option value="9">This is select number 9</option>
             <option value="10">This is select number 10</option>
             <option value="11">This is select number 11</option>
             <option value="12">This is select number 12</option>
           </select>

它对我有用

【讨论】：

这会正确调整所有大小，但在选择值时会导致 IE 11 崩溃。模糊作品找到。铬工作正常。有什么想法吗？
这在 Chrome 中不再有效

【解决方案2】：

您可以使用size 属性使<select> 显示为框而不是下拉列表。您在size 属性中使用的数字定义了在不滚动的情况下可以在框中看到多少选项。

<select size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>

http://jsfiddle.net/cSSjF/

您不能将其应用于<select> 并且尽管它仍然显示为下拉列表。浏览器/操作系统将决定应该为下拉列表显示多少选项，除非您使用 HTML、CSS 和 JavaScript 创建一个虚假的下拉列表。

【讨论】：

【解决方案3】：

Raj_89 解决方案是最接近有效的选项，尽管 Kevin Swarts 在评论中提到它会破坏 IE，这对于大量企业客户来说是一个问题（并告诉您的客户您不会为 IE 编码“因为原因”不太可能让你的老板高兴；））。

所以我玩弄了它，问题出在这里：'onmousedown' 事件在 IE 中抛出了一个合适的问题，所以我们想要做的是防止用户第一次单击下拉菜单时出现默认设置。重要的是，这只是我们这样做的时候：如果我们防止在下次点击时出现故障，当用户做出选择时，onchange 事件将不会触发。

通过这种方式，我们获得了不错的下拉菜单，没有闪烁，也没有破坏 IE - 可以正常工作...至少在 IE10 及更高版本以及所有其他主要浏览器的最新版本中运行良好。

<p>Which is the most annoing browser of them all:</p>
<select id="sel" size = "1">
    <option></option>
    <option>IE 9</option>
    <option>IE 10</option>
    <option>Edge</option>
    <option>Firefox</option>
    <option>Chrome</option>
    <option>Opera</option>
</select>

这里是小提琴：https://jsfiddle.net/88cxzhom/27/

还有几点需要注意： 1）绝对定位和设置z-index有助于避免在显示选项时移动其他元素。 2) 使用 'currentTarget' 属性 - 这将是所有浏览器中的选择元素。虽然在 IE 中将选择“目标”，但其余部分实际上允许您使用选项。

希望这对某人有所帮助。

【讨论】：

【解决方案4】：

size 属性很重要，如果 size=5，则将显示前 5 个项目，对于其他项目，您需要向下滚动..

<select name="numbers" size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
</select>

【讨论】：

如果我们使用 size 参数，它不会显示为下拉菜单，但我需要作为下拉菜单

【解决方案5】：

Tnx @Raj_89，你的把戏很好，可以更好，只有使用额外的风格，使其在其他 dom 对象上，就像 html 中的常见选择选项标记...

select{
 position:absolute;
}

你可以在这里看到结果：http://jsfiddle.net/aTzc2/

【讨论】：

【解决方案6】：

我使用了这段代码，它在 Chrome、Firefox 和 IE 上都适用。

<select  onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.blur()"  onblur="this.size=0;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
<option>option6</option>
<option>option7</option>
</select>

【讨论】：

这和this answer差不多。

【解决方案7】：

无法限制选择下拉列表中可见元素的数量（如果您将其用作下拉框而不是列表）。

但是您可以使用 javascript/jQuery 将这个选择框替换为其他东西，它看起来就像一个下拉框。然后您可以根据需要处理下拉菜单的高度。

jNice 将是一个具有这些功能的 jQuery 插件。但也有很多替代方案。

【讨论】：

【解决方案8】：

使用<select>的size属性；

【讨论】：

【解决方案9】：

<p>Which one true?</p>
<select id="sel">
    <option>-</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

（只显示所有选项的第一个选项）

document.getElementById("sel").options.length=1;

【讨论】：

其实这样就截断了列表。因此，虽然您只看到已设置的选项数量，但您会丢失其他选项，因为它们不可见，也无法通过滚动选择它们。

【解决方案10】：

我在 ReactJS 中为此做了一个简单的解决方案，你也可以在 Vanilla Javascript 中使用它。

Javascript 代码

//props.options = [{value:'123',label:'123'},{value:'321',label:'321'},{value:'432',label:'432'}];
<div>
<div
  className="new-user-input"
  style={{ marginTop: '10px' }}
  onClick={() => {
    this.setState({
      showOptions: !this.state.showOptions,
    });
  }}
>
  {selectedOption ? (
    <span className="txt-black-600-12">
      {' '}
      {selectedOption.label}{' '}
    </span>
  ) : (
    <span className="txt-grey-500-12">
      Select Option
    </span>
  )}

  //Font awesome icons
  <span className="float-right">
    {this.state.showOptions ? (
      <FaAngleUp />
    ) : (
      <FaAngleDown />
    )}
  </span>
  {this.state.showOptions && (
    <div className="custom-select mt-10">
      {this.props.options.map(ele => {
        return (
          <span
            className="custom-select-option"
            onClick={() => {
              this.setState({
                selectedOption: ele,
                showOptions: false,
              });
            }}
          >
            {ele.label}
          </span>
        );
      })}
    </div>
  )}
</div>
</div>

CSS

.new-user-input {
  border: none;
  background-image: none;
  background-color: #ffffff;

  box-shadow: 0px 1px 5px 1px #d1d1d1;
  outline: none;
  display: block;
  margin: 20px auto;
  padding: 10px;
  width: 90%;
  border-radius: 8px;
}

.new-user-input:focus {
  border: none;
  background-image: none;
  background-color: #ffffff;
  outline: none;
}
    .custom-select{
  display: flex;
    flex-direction: column;
    max-height: 100px;
    overflow: auto;
    flex: 1 0;
}
.custom-select-option{
  padding: 10px 0;
  border-bottom: 1px solid #ececec;
  font-size: 10px;
  font-weight: 500;
  color: #413958;
}

【讨论】：

使用自定义 DOM 替换选择元素有一个主要缺点：缺乏可访问性支持。例如，您的控件将不支持键入以选择一个选项、使用空格键来打开或关闭下拉菜单、使用箭头键来选择一个选项、输入以选择一个选项等等。这会惩罚不使用鼠标的视力受损用户以及喜欢使用键盘的“高级用户”。

【解决方案11】：

对旨在保留框架样式（即 Bootstrap）的现有解决方案进行微小但重要的修改：将 this.size=0 替换为 this.removeAttribute('size')。

<select class="custom-select" onmousedown="if(this.options.length>5){this.size=5}"
    onchange='this.blur()' onblur="this.removeAttribute('size')">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
    <option>option5</option>
    <option>option6</option>
    <option>option7</option>
</select>

【讨论】：