TopJavaScriptjQuery > 2011年10月
2011年10月 7日

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

October 7,2011 1:55 AM
Tag:[]
Permalink

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でカンマ区切りにして表示しています。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3