HTML内の表示されるオプションの数を制限するにはどうすればよいですか<select>ドロップダウンですか？例えばHTML <select>ドロップダウンの表示オプションを制限するにはどうすればよいですか？
：
<select>
<option value="1">1</option>
<option value="2">2</option>
...
<option value="20">20</option>
</select>
にはどうすればブラウザのみ最初の5つのオプションを表示し、残りのスクロールダウンして入手できますか？サイズ= 5つの、最初の5つの項目が表示され、他の人のためにあなたがスクロールダウンする必要がある場合
サイズは、あなたが<select>のように見せることsize属性を使用することができます
<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>
サイズパラメータを使用するとドロップダウンとして表示されませんが、ドロップダウンが必要です – vinox
..事項を属性ドロップダウンの代わりにボックス。 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>
あなたは<select>とにこれを適用することはできません、それはまだかかわらず、ドロップダウンリストとして表示されています。ブラウザー/オペレーティングシステムは、HTML、CSS、およびJavaScriptを使用して偽のドロップダウンリストを作成しない限り、ドロップダウンリストに表示するオプションの数を決定します。
sizeの属性は<select>です。
選択ドロップダウンリストで表示される要素の数を制限することはできません（ドロップダウンボックスとして使用し、リストとして使用しない場合）。
しかし、javascript/jQueryを使用して、この選択ボックスを他のものに置き換えることができます。これはドロップダウンボックスのように見えます。次に、必要に応じてドロップダウンの高さを処理できます。
jNiceは、このような機能を備えたjQueryプラグインです。しかし、そこには多くの選択肢が存在する。
あなたは試すことができますそれは私のために働いたこの
<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は正常に動作します。何か案は？ –
TNX @ Raj_89、あなたのトリックは非常に良好であった、他のDOMにそれを作ることだけを使用、余分なスタイル、 により、改善することができます正確にHTMLに共通の選択オプションタグのようなオブジェクト、...
select{
position:absolute;
}
uはここで結果を見ることができます：http://jsfiddle.net/aTzc2/
Raj_89ソリューションは、Kevin Swartsがコメントで述べたように、有効なオプションに最も近いものです。これは、企業顧客の多数が問題となるIEを破る予定です（また、IEにコードを作成しないことをクライアントに伝える"理由は"あなたの上司を幸せにする可能性が低いため）;））。
私はここで問題を抱えています。「onmousedown」イベントはIEでうまくいっているので、ユーザーが最初にドロップダウンをクリックしたときのデフォルトを防ぐことです。それは、これは我々がこれを行う唯一の時間であることが重要です：ユーザーは自分の好きなものを作るときに我々は、次のクリックでdefultを防ぐならば、のonchangeイベントが発生しません。
私たちは素敵なドロップダウンを取得するこの方法で、フリッカは、何のIEを破壊 - ちょうど良く、少なくともIE10で、最大...働かない、他のすべての主要なブラウザの最新relases。 https://jsfiddle.net/88cxzhom/27/
さらにいくつかのものは注意すべき： 1）絶対位置とzインデックスを設定するオプションを表示する場合、他の要素を移動回避するために有用である。ここで
<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>
これは誰かを助けることを望みます。
私はこのコードを使用し、それがクロム、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>
ありがとうございます！残念ながら、size属性はすべてのxオプションを表示するため、私が探していたものではありません。私はこのような少し厄介な問題のためにjavascriptを避けようとしていました。しかし、私は他の選択肢がないようです。 – medowlock
yup。すべての ''
ブラウザメーカーがWebComponentsやその他のものを構築していないことを、私は決して理解できません。どんな開発者も、「私の選択したドロップダウンリストに表示される要素の数を制限したいと思っています...その醜いリスト - yのことはうまくいくでしょう！ – Petrov