新米SE、マーケティングを学ぶの巻

Web系のプログラミングの記事や、マーケティングについて書いていきます。

jQueryプラグイン、Multiple selectで全選択項目を作る。

以前、Multiple selectの大きさを調整しました。、
jQueryプラグイン、Multiple selectの大きさをいじる。 - 新米SE、マーケティングを学ぶの巻


今回は、選択リストのなかに全選択項目を加えてみますゞ(`')、
全選択項目を選択すると、その他の項目が薄くなって選択できなくなり、選択からはずすともとの状態に戻ります。

f:id:se312:20150127214056j:plain

以下、ソースコードです。

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>

JavaScript

$('#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で全選択項目を作る。:デモページ