Question

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

例如：

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

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

Answer 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>

它对我有用

Answer 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创建虚假的下拉列表。

Answer 3

Raj_89解决方案最接近有效选项尽管凯文斯瓦茨在评论中提到它会打破IE，这对于大量的企业客户来说是一个问题（告诉你的客户你赢得了代码）对于IE＆＃34;因为原因＆＃34;不太可能让你的老板高兴;））。

所以我玩了它，这就是问题所在：＆＃39; onmousedown＆＃39;事件在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）使用＆＃39; currentTarget＆＃39; property - 这将是所有浏览器中的select元素。虽然＆＃39;目标＆＃39;将在IE中选择，其余的将实际允许您使用选项。

希望这有助于某人。

Answer 4

Tnx @ Raj_89，你的伎俩非常好，可以更好，只有使用额外的风格，在其他dom对象上创建它，就像html中常见的选择选项标签...

select{
 position:absolute;
}

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

Answer 5

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>

Answer 6

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

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

jNice将是一个具有此类功能的jQuery插件。但也存在许多替代方案。

Answer 7

我使用了这段代码，它适用于Chrome，Firefox和IE。

＆＃13;

<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>

＆＃13;

Answer 8

<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;

Answer 9

我在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;
}

Answer 10

对旨在保留框架样式（即 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>

Answer 11

使用size;

的<select>属性

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

11 个答案: