Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript select box plugins

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #152708
    gowda24
    Participant

    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.

    #152714
    Paulie_D
    Member

    I have a select box with 100 options values.

    Wow…

    But can’t you do this in CSS?

    select{
        height: 10em;
    }
    
    #152734
    gowda24
    Participant

    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 .

    #152736
    Paulie_D
    Member

    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

    #153029
    gowda24
    Participant

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

    #153030
    gowda24
    Participant

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

    Need to look with selectize.js

    #153045
    Tomasz Lisiecki
    Participant

    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.