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;");
		}
	}
});

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