How can I limit the visible options in an HTML <

问题:

How can I limit the number of shown options in an HTML <select> drop down?

For example:

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

How can I get the browser to show only the first five options and scroll down for the rest?

回答1:

You can try this

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

It worked for me

回答2:

You can use the size attribute to make the <select> appear as a box instead of a dropdown. The number you use in the size attribute defines how many options are visible in the box without scrolling.

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

You can’t apply this to a <select> and have it still appear as a drop-down list though. The browser/operating system will decide how many options should be displayed for drop-down lists, unless you use HTML, CSS and JavaScript to create a fake dropdown list.

回答3:

Raj_89 solution is the closest to being valid option altough as mentioned by Kevin Swarts in comment it is going to break IE, which for large number of corporate client is an issue (and telling your client that you won't code for IE "because reasons" is unlikely to make your boss happy ;) ).

So I played around with it and here is the problem: the 'onmousedown' event is throwing a fit in IE, so what we want to do, is to prevent default when user clicks the dropdown for the first time. It is important this is only time we do this: if we prevent defult on the next click, when user makes his pick, the onchange event won't fire.

This way we get nice dropdown, no flicker, no breaking down IE - just works... well at least in IE10 and up, and latest relases of all the other major browsers.

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

Here is the fiddle: https://jsfiddle.net/88cxzhom/27/

Few more things to notice: 1) The absolute positioning and setting z-index is helpful to avoid moving other elements when the options are displayed. 2) Use 'currentTarget' property - this will be the select element across all browsers. While 'target' will be select in IE, the rest will actually allow you to work with option.

Hope this helps someone.

回答4:

Tnx @Raj_89 , Your trick was very good , can be better , only by use extra style , that make it on other dom objects , exactly like a common select option tag in html ...

select{
 position:absolute;
}

u can see result here : http://jsfiddle.net/aTzc2/

回答5:

the size attribute matters, if the size=5 then first 5 items will be shown and for others you need to scroll down..

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

回答6:

It is not possible to limit the number of visible elements in the select dropdown (if you use it as dropdown box and not as list).

But you could use javascript/jQuery to replace this selectbox with something else, which just looks like a dropdown box. Then you can handle the height of dropdown as you want.

jNice would be a jQuery plugin which has such features. But there also exists many alternatives for that.

回答7:

I used this code and it worked for me on Chrome, Firefox and 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>

回答8:

Use size attribute of <select>;

回答9:

<p>Which one true?</p>
<select id="sel">
    <option>-</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

( display just first option of all options)

document.getElementById("sel").options.length=1;