htmlのセレクトのオプションで改行(jQuery-ui widget)

セレクトのオプションで改行

htmlのセレクトボックスの選択肢で改行するのは、デフォルトではサポートされていないのでjavascriptを使う必要があるみたいです。調べたところ、2つのjQuery-uiの拡張が見つかりました。

• Selectmenu: https://github.com/fnagel/jquery-ui/wiki/Selectmenu
• multilineSelectmenu: https://github.com/ainterpreting/jquery-multilineSelectmenu

シンプルな後者を使ってみます。これはjQuery-uiのwidgetの拡張を利用したものです。

See the Pen example by NomuraS (@NomuraS) on CodePen.

optionをjavascriptで後から追加した場合、下のようにdestroyを使ってリセットする必要があります(stackoverflow)。

$('#button').click(function(){
    $('#select').append($('<option>').html('line1 |  line2'))
    $("#select").multilineSelectmenu('destroy');
    $("#select").multilineSelectmenu();
})

changeイベント

changeイベントの追加は、(multilineSelectmenuのベースである)jQuery-uiのselectmenuの場合は

$('#select').on('selectmenuchange',function(){
     ...
})

で使えます(公式ドキュメント)。追加optionに対してでなければ、

$('#select').multilineSelectmenu({
    change: function(event,data){ 
        ...
    }
})

で使えます。ただ、独自のwiedgetで追加optionに対してchangeイベントを与える正当な方法がよく分かりませんでした。下記は、とりあえずの対処法で、ライブラリの3行目に処理を書きます。これでchangeイベントの同じ扱いができます。

var multilineSelectmenu = $.widget("ui.multilineSelectmenu", $.ui.selectmenu, {
    _setText: function (element, value) {
        console.log($('#select').val()) // オプションを変更するたびに、$('#select').val()の値が変化する
        if (value) {
            if (value.indexOf('|') !== -1) {
                var lines = value.split('|');
                value = '<span class="ui-selectmenu-menu-item-header">' + lines[0].trim() + '</span>';
                for (var i = 1; i < lines.length; i++) {
                    value = value + '<span class="ui-selectmenu-menu-item-content">' + lines[i].trim() + '</span>';
                }
            }
            element.html(value);
        } else {
            element.html("&#160;");
        }
    }
});

付け加えておくと、上の'|'(パイプ)を変更すれば改行する記号を変更できます。例えば、%などでも改行できます。