How can I limit the visible options in an HTML select dropdown

Question

How can I limit the number of shown options in an HTML  lt select gt  drop down   For example        lt select gt       lt option value  1  gt 1 lt  option gt       lt option value  2  gt 2 lt  option gt               lt option value  20  gt 20 lt  option gt       lt  select gt    How can I get the browser to show only the first five options and scroll down for the rest

User · Answer

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       lt p gt Which is the most annoing browser of them all  lt  p gt   lt select id  sel  size    1  gt       lt option gt  lt  option gt       lt option gt IE 9 lt  option gt       lt option gt IE 10 lt  option gt       lt option gt Edge lt  option gt       lt option gt Firefox lt  option gt       lt option gt Chrome lt  option gt       lt option gt Opera lt  option gt   lt  select gt    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

User · Answer

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

User · Answer

lt p gt Which one true  lt  p gt   lt select id  sel  gt       lt option gt - lt  option gt       lt option gt A lt  option gt       lt option gt B lt  option gt       lt option gt C lt  option gt   lt  select gt      display just first option of all options    document getElementById  sel   options length 1

User · Answer

I used this code and it worked for me on Chrome  Firefox and IE    x000D   x000D   lt select  onmousedown  if this options length gt 5  this size 5    onchange  this blur     onblur  this size 0   gt  x000D   lt option gt option1 lt  option gt  x000D   lt option gt option2 lt  option gt  x000D   lt option gt option3 lt  option gt  x000D   lt option gt option4 lt  option gt  x000D   lt option gt option5 lt  option gt  x000D   lt option gt option6 lt  option gt  x000D   lt option gt option7 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I have made a simple solution for this in ReactJS you can use this in Vanilla Javascript aswell  Javascript code   props options     value  123  label  123    value  321  label  321    value  432  label  432      lt div gt   lt div   className  quot new-user-input quot    style    marginTop   10px       onClick       gt        this setState         showOptions   this state showOptions                gt     selectedOption          lt span className  quot txt-black-600-12 quot  gt                     selectedOption label            lt  span gt               lt span className  quot txt-grey-500-12 quot  gt        Select Option      lt  span gt            Font awesome icons    lt span className  quot float-right quot  gt       this state showOptions            lt FaAngleUp   gt                   lt FaAngleDown   gt            lt  span gt     this state showOptions  amp  amp         lt div className  quot custom-select mt-10 quot  gt         this props options map ele   gt            return              lt span             className  quot custom-select-option quot              onClick       gt                  this setState                   selectedOption  ele                  showOptions  false                                              gt               ele label             lt  span gt                            lt  div gt        lt  div gt   lt  div gt   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

User · Answer

Use size attribute of  lt select gt

User · Answer

You can use the size attribute to make the  lt select gt  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    lt select size  5  gt       lt option gt 1 lt  option gt       lt option gt 2 lt  option gt       lt option gt 3 lt  option gt       lt option gt 4 lt  option gt       lt option gt 5 lt  option gt       lt option gt 6 lt  option gt       lt option gt 7 lt  option gt       lt option gt 8 lt  option gt       lt option gt 9 lt  option gt       lt option gt 10 lt  option gt       lt option gt 11 lt  option gt       lt option gt 12 lt  option gt   lt  select gt     http   jsfiddle net cSSjF    You can   t apply this to a  lt select gt  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

User · Answer

the size attribute matters  if the size 5 then first 5 items will be shown and for others you need to scroll down     lt select name  numbers  size  5  gt       lt option gt 1 lt  option gt       lt option gt 2 lt  option gt       lt option gt 3 lt  option gt       lt option gt 4 lt  option gt       lt option gt 5 lt  option gt       lt option gt 6 lt  option gt       lt option gt 7 lt  option gt   lt  select gt

User · Answer

You can try this   x000D   x000D   lt select name  select1  onmousedown  if this options length gt 8  this size 8     onchange  this size 0   onblur  this size 0   gt  x000D                lt option value  1  gt This is select number 1 lt  option gt  x000D                lt option value  2  gt This is select number 2 lt  option gt  x000D                lt option value  3  gt This is select number 3 lt  option gt  x000D                lt option value  4  gt This is select number 4 lt  option gt  x000D                lt option value  5  gt This is select number 5 lt  option gt  x000D                lt option value  6  gt This is select number 6 lt  option gt  x000D                lt option value  7  gt This is select number 7 lt  option gt  x000D                lt option value  8  gt This is select number 8 lt  option gt  x000D                lt option value  9  gt This is select number 9 lt  option gt  x000D                lt option value  10  gt This is select number 10 lt  option gt  x000D                lt option value  11  gt This is select number 11 lt  option gt  x000D                lt option value  12  gt This is select number 12 lt  option gt  x000D              lt  select gt  x000D   x000D   x000D    It worked for me

User · Answer

A minor but important modification to existing solutions aiming at preserving framework styling  i e  Bootstrap   replace this size 0 with this removeAttribute  size     lt select class  quot custom-select quot  onmousedown  quot if this options length gt 5  this size 5  quot      onchange  this blur    onblur  quot this removeAttribute  size   quot  gt       lt option gt option1 lt  option gt       lt option gt option2 lt  option gt       lt option gt option3 lt  option gt       lt option gt option4 lt  option gt       lt option gt option5 lt  option gt       lt option gt option6 lt  option gt       lt option gt option7 lt  option gt   lt  select gt

User · Answer

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

[html] How can I limit the visible options in an HTML <select> dropdown?

Examples related to html

Examples related to drop-down-menu