もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第12回 jQueryでセレクトボックスをデザインする

この記事を読むのに必要な時間:およそ 5 分

スクリプトの記述

セレクトボックスの挙動としては最初に示した通り

  1. クリックするとプルダウンが表示
  2. プルダウンの項目をクリックする
  3. セレクトボックスの中身が選択した項目に置き換わる

です。順番に見ていきましょう。

1. クリックするとプルダウンが表示

1. クリックするとプルダウンが表示

$('div.selectbox').each(function(){
    var self = $(this);
    var select = $('a.select',self);
    var pulldown = $('div.pulldown',self);
    
    pulldown.hide().children(':last-child').addClass('last-child'); // 1
    
    select.click(function(){
        $('div.pulldown').hide();
        pulldown.show(); // 2
        $(this).addClass('select_focus'); // 3
        return false;
    });
});

まず最初にdiv.selectboxがページ内に複数あってもいいように,each関数を使って処理をdiv.selectboxの個数分繰り返させます。

eachで得られるthisを何度も使うので,変数selfに保存しておきます。さらに,a.selectとdiv.pulldownも同じようにselectとpulldownに保存しておきます。その後,表示されているpulldownを非表示にした上で,最後の子要素(div.pulldown a:last-child)にlast-childを割り振っておきます。

clickイベントに,

  1. 表示されているpulldownを非表示
  2. クリックされた疑似セレクトボックスが内包するpulldownを表示
  3. 選択中のクラスを割り当てる

以上で1の動作が完成します。

注意ではないですが,a要素をクリックした際に,href属性に#が入っていると,ページ上部へ移動してしまうので,return false;を入れてブラウザのデフォルトの動作を無効にしておきます。

2-3 プルダウンの項目をクリックするとセレクトボックスの中身が選択した項目に置き換わる

2,3は一連の動作なので同時に扱います。

2-3 プルダウンの項目をクリックするとセレクトボックスの中身が選択した項目に置き換わる

var select_value = $('span',select);

$('a',pulldown).click(function(){
    var value = $(this).attr('href').replace('#',''); // 1
    var text = $(this).text(); // 2
    
    select_value.text(text); // 3
    
    $('a.selected',pulldown).removeClass('selected'); // 4
    $('a.select_focus').removeClass('select_focus'); // 5
    $(this).addClass('selected'); // 6
    pulldown.hide(); // 7
    
    return false;
});

プルダウン内のa要素をクリックした場合に,

  1. optionのvalueにあたる部分とテキストを得る
  2. テキストは疑似セレクトボックスのテキストと入れ替え
  3. 疑似セレクトボックスのテキストをtextに入れ替える
  4. 選択中になっているa.selectedからselectedを外す
  5. 同じくfocusされているa.select_focusからselect_focusを外す
  6. クリックしたa要素にはselectedを付与する
  7. プルダウンを隠す

の順番で適用します。

以上で

  1. クリックするとプルダウンが表示
  2. プルダウンの項目をクリックする
  3. セレクトボックスの中身が選択した項目に置き換わる

の基本動作は設定しましたが,もう少し詰めて見て

  • プルダウンが表示されている状態で,プルダウン以外の箇所をクリックするとプルダウンが閉じる
  • formのactionでデータをPOSTできるようにinput:hiddenにvalueを入れておく

もそれぞれ実装してみましょう。

プルダウン以外の箇所をクリックでプルダウンが閉じる

画像

これを実装するためには,プルダウン以外の箇所をクリックした,というイベントをキャプチャする必要があります。どこでキャプチャすればいいでしょうか?

答えは色々あると思いますが,bodyにbindしてしまうのが手軽な方法です。

bodyをclickするとプルダウンが閉じる

bodyをclickするとプルダウンが閉じる

$('body').click(function(){
    $('a.select_focus').removeClass('select_focus');
    $('div.pulldown').hide();
});

input:hiddenにvalueを入れておく

最後に,input:hiddenのvalueにデータを入れる処理ですが,これは単純にdiv.pulldown aをクリックした際にvalueで得ておいたデータをinput:hiddenのvalueに挿入するだけです。

input:hiddenにvalueを入れておく

$('input:hidden',self).val(value);

以上で疑似プルダウンの実装が完了しました。

まとめ

いかがだったでしょうか。疑似プルダウン自体はCSSだけでも実装できたりしますが,jQueryを使うことの利点としては,show(hide)メソッド部分をslideDown(slideUp)やfadeIn(fadeOut)メソッドに変えるだけで,アニメーションするプルダウンが実装できてしまう点ではないでしょうか。

今回アニメーションはつけずにシンプルなサンプルで紹介しましたが,ぜひアニメーションバージョンなど色々な方法で実装してみてください。

おまけ

今回紹介したサンプルは,JSがON環境でないと動作しないようになっています。JSがOFFときも動作するような構成にしたい場合は,デフォルトのセレクトボックスを今回紹介した構成に置き換えるjQueryプラグインを過去に作っているので,そちらを使ってみてください。

jQselectable: http://code.google.com/p/jqselectable/

また,前回紹介したバリデーションも,より手軽に使いたい場合もjQueryプラグインがありますので,よければ参考にしてみてください。

jQuery.validation.js: http://moto-mono.net/validation

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/