Comment limiter les options visibles dans une liste déroulante HTML <select> ?

Question

Comment limiter le nombre d'options affichées dans un fichier HTML ? <select> descendre ?

Par exemple :

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

Comment puis-je faire en sorte que le navigateur n'affiche que les cinq premières options et fasse défiler l'écran vers le bas pour le reste ?

Answer 1

J'ai utilisé ce code et il a fonctionné pour moi sur Chrome, Firefox et 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>

Answer 2

Il n'est pas possible de limiter le nombre d'éléments visibles dans la liste déroulante (si vous l'utilisez comme une liste déroulante et non comme une liste).

Mais vous pouvez utiliser javascript/jQuery pour remplacer cette boîte de sélection par quelque chose d'autre, qui ressemble simplement à une boîte déroulante. Vous pouvez alors gérer la hauteur de la liste déroulante comme vous le souhaitez.

jNice serait un plugin jQuery doté de telles fonctionnalités. Mais il existe également de nombreuses alternatives.

Answer 3

Utilice size attribut de <select> ;

Answer 4

J'ai créé une solution simple pour cela dans ReactJS, mais vous pouvez aussi l'utiliser dans Vanilla Javascript.

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

Une modification mineure mais importante des solutions existantes visant à préserver le style du cadre (c'est-à-dire Bootstrap) : remplacez this.size=0 con 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>