HTML balise Select de défilement vertical avec 10 option

appliquer un size="10" à votre sélection.

quelque chose comme:

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

---

Vous devez mettre un peu de style à l'étiquette comme frontière, image de fond d'écran etc.

Quelque chose comme cela à faire:

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

ensuite utiliser cette jQuery code:

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

Demo @ Violon

---

Essayer avec ceci:

$('#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();
});

---

Que vous avez dit:

lorsque la taille est supérieure à 1 de la balise select, il n'affiche pas fond bleu en stationnaire, quand j'ai ajouter un arrière-plan via css:hover, son travail dans les FF, mais pas dans chrome et safari.

de sorte que vous pouvez maquette:

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

La démo avec le hover classe.

OriginalL'auteur Jai