HTML Select a tag showing vertical scrolling with parameter 10

Question

I want to make a selection box like this

with option 10 of the selection, when I try to add more than 15 options, it shows the vertical scroll bar, but not show when it has 10 options.

is there any way to achieve this.

Answer 1

apply size="10"to your choice.

sort of:

<select size="10">
   // all your options
</select>

---

You have to put some style in the shortcut like border, background image, etc.

Something like that:

<label id='choose' for='options'>Select options</label>
<br clear='all' />
<select id='options' size="10" style='display:none;'>
    // all the options
</select>

then use this jQuery code:

$('#choose').click(function(){
    $(this).siblings('select').toggle();
});

Demo script

---

Try the following:

$('#choose').click(function (e) {
    e.stopPropagation();
    $(this).siblings('select').css('width', $(this).outerWidth(true)).toggle();
});

$('#options').change(function (e) {
    e.stopPropagation();
    var val = this.value || 'Select options';
    $(this).siblings('#choose').text(val);
    $(this).hide();
});

---

How did you comment:

1 , , css: , FF, .

:

$('#options').find('option').on({
    mouseover: function () {
        $('.hover').removeClass('hover');
        $(this).addClass('hover');
    },
    mouseleave: function () {
        $(this).removeClass('hover');
    }
});

hover.

Answer 2

,

http://harvesthq.imtqy.com/chosen/

css.

Answer 3

. size 1, , , , , .

<select size="10">..</select>