HTMLの <select>要素で size属性を利用し、select box の ▼マーククリック後に指定した数の選択肢を表示させたい。

Question

HTML <form>構文で、<select>要素を使ってページを作っています。<select>要素内にsize属性を設定しない場合は、select box の▼マークをクリックすると、<option>要素の選択肢がプルダウン表示されます。

一方、<select size=xx ... > とsize属性を指定すると、今度は、当該HTMLページに遷移した時点で、直ちに、size属性で設定した数の<option>選択肢がプルダウン表示されてしまいます。

これを、HTMLページに遷移した時点では、プルダウン表示されず、select box の ▼マーククリック後に、size属性で設定した数の<option>選択肢がプルダウン表示されるようにすることは可能でしょうか？

Comments

[thyda.eiqau]

> size属性を指定すると、今度は、当該HTMLページに遷移した時点で、直ちに、size属性で設定した数の<option>選択肢がプルダウン表示されてしまいます。
されません。そもそもプルダウンボックスではありません。

> select box の ▼マーククリック後に、size属性で設定した数の<option>選択肢がプルダウン表示される
3を指定したとして、4つ目以降の選択肢を選びたいときはどうするのですか？

[sugihiro1]

お問い合わせありがとうございます。
プルダウンボックスではないこと、承知しております。「プルダウンされたような形で一覧表示される」という意味合いで、表現させていただきました。
例えば、<option>が10個あり、<select id=3 ......>とすると、残り7
個はスクロールバーが現れ、それをスクロールダウンすることにより、表示・選択することができます。
困っていることは、この３個の選択肢とスクロールバーが、当該HTMLページに遷移した時点で表示されてしまうことです。これを、select box の ▼マークをクリックした後に表示させるようにしたいのです。
お知恵を拝借できれば大変ありがたく存じます。よろしくお願いいたします。

Answer 1

類似するStackOverflowのトピックがありました。

• html - How to Set Height for the Drop Down of Select box - Stack Overflow

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

const select = document.getElementsByTagName('select')[0];
select.addEventListener('focus',  () => { select.size = 3; });
select.addEventListener('blur',   () => { select.size = 1; });
select.addEventListener('change', () => { select.blur(); });

• CodePen

Comments

[sugihiro1]

出来ました。ありがとうございました。