jQueryでセレクトボックスの複数選択と単一選択を切り替える

jQueryでセレクトボックスの複数選択と単一選択を切り替える

Posted at October 7,2011 1:55 AM
Tag:[jQuery]

jQueryでセレクトボックスの複数選択と単一選択を切り替える方法を紹介します。

1.サンプル

サンプルを用意しましたので動作を確認してください。

サンプル

以下、サンプルの動作を説明します。次のセレクトボックスがあります。

セレクトボックス

このセレクトボックスは項目をひとつしか選択できません(単一選択)。

セレクトボックス

青色のリンクをクリックすれば、複数選択可能なセレクトボックスに切り替わります。

セレクトボックス

CtrlキーやShiftキーと組み合わせてクリックすれば次のように複数選択できます。

セレクトボックス

2.コードと解説

サンプルのメインとなるコードは次の通りです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
$(function(){
    $('.change').click(function(){
        if (!$('select').attr('multiple')) {
           $('select').attr('multiple','multiple');
           $('select').attr('size','20');
           $(this).text('複数選択解除');
        } else {
            $('select').removeAttr('multiple');
            $('select').attr('size','1');
            $(this).text('複数選択');
        }
    });
    $('input[type=submit]').click(function(){
        var list = new Array();
        var counter;
        $("select option:selected").each(function(){
            list[list.length] = $(this).text() + '(' + $(this).val() + ')';
            counter++;
        });
        $("#result").text(list.join());
    });
});
</script>
<div><a href="javascript:void(0)" class="change" style="outline:none">複数選択</a></div>
<select id="test">
  <option value="" selected="selected">選択してください</option>
  <option value="01">北海道</option>
  <option value="02">青森県</option>
  <option value="03">岩手県</option>
  …中略…
  <option value="46">鹿児島県</option>
  <option value="47">沖縄県</option>
</select>
<input type="submit" value="送信" />
<div id="result"></div>

「複数選択」のリンクをクリックすると、次の部分が動作します。

    $('.change').click(function(){
        if (!$('select').attr('multiple')) {
           $('select').attr('multiple','multiple');
           $('select').attr('size','20');
           $(this).text('複数選択解除');
        } else {
            $('select').removeAttr('multiple');
            $('select').attr('size','1');
            $(this).text('複数選択');
        }
    });

select要素のmultiple属性を確認して、falseであればmultiple属性とsize属性を指定して、セレクトボックスを複数選択に切り替えます。属性の意味は次のとおりです。

  • multiple属性:複数選択を有効にする
  • size属性:表示行数

multiple属性が設定されていればelse節を実行してmultiple属性を削除します。複数選択を解除する場合、size属性は最低「1」を設定する必要があるようです。

サンプルではsize属性を書き換えてますが、multiple属性の有無にかかわらず常に同じ値を設定していても問題ありません。

「送信」をクリックしたときには次の部分が動作します。

    $('input[type=submit]').click(function(){
        var list = new Array();
        var counter;
        $("select option:selected").each(function(){
            list[list.length] = $(this).text() + '(' + $(this).val() + ')';
            counter++;
        });
        $("#result").text(list.join());
    });

セレクトボックスの選択項目は「$("select option:selected").each(function(){}」で取得できます。each()の中はfor文と同じ動作になるので、選択項目を配列に設定して、最後にjoinでカンマ区切りにして表示しています。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)