jQueryプラグイン、Multiple selectで全選択項目を作る。
以前、Multiple selectの大きさを調整しました。、
jQueryプラグイン、Multiple selectの大きさをいじる。 - 新米SE、マーケティングを学ぶの巻
今回は、選択リストのなかに全選択項目を加えてみますゞ(`')、
全選択項目を選択すると、その他の項目が薄くなって選択できなくなり、選択からはずすともとの状態に戻ります。
以下、ソースコードです。
HTML
<select multiple="multiple" id="select" name="select[]"> <option value='all'>ALL</option> <option value='1'>elem 1</option> <option value='2'>elem 2</option> <option value='3'>elem 3</option> <option value='4'>elem 4</option> </select>
$('#select').multiSelect({ selectableHeader: "<div class='custom-header'>選んで</div>", selectionHeader: "<div class='custom-header'>選んだ</div>", afterSelect: function(values){ if(values == "all"){ /*それぞれのリストでoption要素の数だけli要素が作成されるので、 option要素の2倍の数のli要素が取得されます。*/ var opts = $('#ms-select').find('li'); for(var i=1; i < opts.length ; i++){ //opt[0]とopt[opts.length/2]がちょうどallの要素に当たる if(i == opts.length/2){ continue; } //allの要素以外を無効化 $(opts[i]).addClass('disabled'); } } }, afterDeselect: function(values){ if(values == "all"){ var opts = $('#ms-select').find('li'); for(var i=1; i < opts.length ; i++){ if(i == opts.length/2){ continue; } $(opts[i]).removeClass('disabled'); } } } }); $(".ms-selectable").css({ width: '90px', height: '180px' }); $(".ms-selection").css({ width: '90px', height: '180px' }); $(".ms-list").css("height","180px"); $(".ms-container").css({ width: '220px', height: '180px', });
ちょっと無理やりっぽいけど、一応できた!
【2015/5/16 追記】
デモページを作成しました!
Multiple selectで全選択項目を作る。:デモページ