2011年12月27日火曜日

[jQuery]フォームのselectを複数選択

selectを複数選択可能にするにはmultipleを指定すれば良いのだけれど、複数選ぶにはCtrl押しながら選択しないといけないのでユーザにやさしくない。直感的に選べるようにするには、jquery.multi-select.jsのプラグインが便利そう。デモや使い方は参照先にあり難しくもないので省略。

ただ、ダイアログが大好きとか、同一ページで選択の対象リストに新規追加もさせたいとか、selectは複数だけど対象リストは同一で場所をとるとかなんとかとか、なんらかの止ん事無き理由でプラグインは使えずダイアログ使ったUIにしないといけなくなったとして練習がてらに書いてみる。そんな状況が実際にあるのかは知らない。書きたいから書くだけ。






なんとなく動きとしてのイメージはこんな感じか。あとはダイアログから新しく人を追加できるようにするとか。
逆に追加とか考えずにもう少し汎用的にすればプラグイン化できるのかな。今度勉強としてみよう。

残念なコードのメモ。 
<script type="text/javascript">
$(function(){
    var dstSlct;
    $('#dialog').dialog({ autoOpen: false });

    // チェックボックス押されたら、対象のselectのこどもを一旦削除して、checkedのものを対象のselectにappendしなおす
    $('.stdntChkBox').click(function() {
        dstSlct.children().remove();
        $('.stdntChkBox:checked').each(function() {
            dstSlct.append('<option value="' + $(this).val() + '" selected="selected">' + $(this).next('label').text() + '</option>');
        });
    });

    // select自身からは変更できなくしとく（selectのこどもは常にselected）
    $('.dstSlct').change(function() {$(this).find("option").attr('selected', true);});

    // ダイアログ表示するときに、対象のselectのこどもを見てcheckboxをcheck
    $('.showDlg').click(function(){ 
        // 対象のselectはボタンの次にあるとする（コードは汎用性が少ない）
        dstSlct = $(this).next();
        $('.stdntChkBox').attr('checked', false);
        dstSlct.find("option").each( function() { $("#stdntList input[value='" + $(this).val() + "']").attr('checked', true); });
        $('#dialog').dialog('open');
    });
});
</script>
ラベル: ,