gowda24

# October 11, 2013 at 4:43 am

Hi,

I have a select box with 100 options values.

The requirement is to allow 10 visible options and then scroll for the next options.

The dropdown list height is controlled by the browsers.

Please suggest me select box plugins where we can control height of the option list.

Paulie_D

# October 11, 2013 at 5:17 am

I have a select box with 100 options values.

Wow…

But can’t you do this in CSS?

select{
    height: 10em;
}

gowda24

# October 11, 2013 at 8:02 am

select height increases the height of the selectbox.

I need the scroll bar for the selectbox list (i.e drop down list which opens).

The default scrollbar appears according to browser.

I need to restrict the scroll bar for the optionlist which scrolls down .

Paulie_D

# October 11, 2013 at 8:24 am

Aha…I see.

A little googling later

<select id="mySelect" 
        onfocus="this.size=10" 
        onblur="this.size=1"
        onmouseleave="this.size=1">
  <option value="">Option 1</option>
  <option value="">Option 2</option>
  <option value="">Option 3</option>
  <option value="">Option 4</option>
  <option value="">Option 5</option>
  <option value="">Option 6</option>
  <option value="">Option 7</option>
  <option value="">Option 8</option>
  <option value="">Option 9</option>
  <option value="">Option 10</option>
  <option value="">Option 11</option>
  <option value="">Option 12</option>
  <option value="">Option 13</option>
  <option value="">Option 14</option>
  <option value="">Option 15</option>
</select>

Codepen

Mottie

# October 11, 2013 at 1:17 pm

Honestly, if you have that many options, it might be better to try a plugin like Chosen, Select2 or selectize.js.

gowda24

# October 15, 2013 at 4:55 am

@Paulie_D – thanks for your suggestion, but since we are setting the size to 10 on focus, it will push the below contents occupying the space.

I want to implement the same functionality like a dropdown.

gowda24

# October 15, 2013 at 4:57 am

@Mottie, i have searched with Chosen, Select2 but i cannot set the size of options in these plugins.

Need to look with selectize.js

Tomasz Lisiecki

# October 15, 2013 at 7:36 am

Hi,

I am a big fan of the Dropkick JS library. There is a dropdown max-height used in CSS you could modify like my example here.