4

こんなセレクトボックスを作りたい

ここに画像の説明を入力

10 個の選択オプションを使用して、15 個を超えるオプションを追加しようとすると、垂直スクロール バーが表示されますが、10 個のオプションがある場合は表示されません。

これを達成する方法はありますか。

4

2 に答える 2

6

あなたの選択にaを適用size="10"します。

何かのようなもの：

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

ボーダー、背景画像などのラベルに何らかのスタイルを設定する必要があります。

このようなことを行う：

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

次に、この jQuery コードを使用します。

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

デモ @ フィドル

これを試してください：

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

あなたがコメントしたように：

サイズが select タグの 1 より大きい場合、ホバーで青い背景が表示されません。css option:hover を使用して背景を追加すると、FF では機能しますが、クロムとサファリでは機能しません。

これでモックアップできます：

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

ホバークラスのデモ。

于 2014-06-09T11:48:19.240 に答える
0

Size 属性は、ドロップダウン リストに表示されるオプションの数を指定します。size 属性の値が 1 よりも大きく、リスト内のオプションの総数よりも小さい場合、ブラウザーはスクロール バーを追加して、表示するオプションが他にもあることを示します。

だから使う<select size="10">..</select>

于 2014-06-09T11:51:38.520 に答える