如何限制HTML下拉菜單中顯示的選項數量?如何限制HTML <select>下拉菜單中的可見選項?
例如:
<select>
<option value="1">1</option>
<option value="2">2</option>
...
<option value="20">20</option>
</select>
我怎樣才能讓瀏覽器只顯示前五個選項和向下滾動的休息嗎?
如何限制HTML下拉菜單中顯示的選項數量?如何限制HTML <select>下拉菜單中的可見選項?
例如:
<select>
<option value="1">1</option>
<option value="2">2</option>
...
<option value="20">20</option>
</select>
我怎樣才能讓瀏覽器只顯示前五個選項和向下滾動的休息嗎?
的大小屬性的問題,如果將要顯示的大小= 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>
如果我們使用的大小參數,它不會顯示爲下拉列表中,但我需要的下拉 – vinox 2013-11-20 11:29:31
可以使用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>
您不能將此應用到<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工作正常。有任何想法嗎? – 2015-05-12 13:46:05
TNX @ Raj_89,你的技巧是很不錯的,可以得到更好的,只有通過使用額外的樣式, ,使其對其他DOM對象,完全像在HTML共同選擇選項標籤...
select{
position:absolute;
}
可以看出U導致這裏:http://jsfiddle.net/aTzc2/
Raj_89解決方案是最接近於有效的選項,正如Kevin Swarts在評論中提到的那樣,它將打破IE,這對於大量的企業客戶端來說是一個問題(並告訴您的客戶端您不會爲IE編寫代碼「因爲理由」不太可能讓你的老闆開心;))。
所以我玩弄了它,這裏是問題:'onmousedown'事件在IE中適合,所以我們想要做的是防止用戶首次單擊下拉菜單時的默認值。重要的是,這只是我們這樣做的時候:如果我們在下次點擊時防止誹謗,當用戶選擇他時,onchange事件不會觸發。
這樣,我們得到了很好的下拉列表中,無閃爍,無打破IE - 只是工作......嗯,至少在IE10和起來,和所有其他主流瀏覽器的最新relases。
<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索引是有用的被顯示的選項時,以避免移動的其他元素。 2)使用'currentTarget'屬性 - 這將是所有瀏覽器中的select元素。雖然'目標'將在IE中選擇,其餘的將實際上允許您使用選項。
希望這可以幫助別人。
我用這個代碼,它爲我工作在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>
謝謝!不幸的是,尺寸屬性不是我正在尋找的,因爲它使所有x選項可見。我試圖避免這樣一個小但惱人的問題的JavaScript。但是,我似乎沒有別的選擇。 – medowlock 2012-01-09 13:40:18
是。我個人從來沒有把它看作是一個問題,因爲所有的'
我永遠不會明白的瀏覽器製造商如何關閉建築WebComponents和諸如此類的東西,他們似乎無法正常工作,因爲這種簡單的事。有任何開發者曾經說過'嗯,我想限制在我選擇的下拉列表中顯示的元素的數量......那個醜陋的列表-y的東西會做得很好! – Petrov 2015-03-16 20:12:54