エリア選択 プルダウン

概要

エリア/国/都市などの地域を選択する為のユーザーインターフェースを自動生成するモジュール。相互連動更新する、一般的なプルダウンUIを提供。

必要な選択肢情報を、必要なタイミングで動的に取得/生成する為、大量の都市マスタデータ等を事前に読み込む必要無く、快適なUIを提供する事ができます。

>BACK TO TOP

サンプル

エリアを選ぶと国の選択肢が、国を選ぶと都市の選択肢が、それぞれ該当地域のものに自動的に切り替わります。

>BACK TO TOP

動作条件

• jQuery v1.2 以降

>BACK TO TOP

簡易なコード例

コピペする事で手軽に再利用が可能なコード例はこちら

>BACK TO TOP

使い方

下記のように必要なファイルを読み込んだうえで...

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="recruit.ui.js"></script>
<script type="text/javascript" src="abroad.ui.js"></script>

プルダウンを表示させたい場所にこのようなHTMLを書き...

<select id="ab-area-sel"></select>
<select id="ab-country-sel"></select>
<select id="ab-city-sel"></select>

最後にこのようなjavascriptコードを書くことで任意のタイミングでプルダウンが自動生成されます。

Recruit.UI.key = 'ご自身のAPIキー';
new ABROAD.UI.Places.Pulldown();

jQueryを使って、ページ表示と同時にプルダウン生成したい場合はこちら:

$(function (){
    Recruit.UI.key = 'ご自身のAPIキー';
    new ABROAD.UI.Places.Pulldown();
});

ご自身のAPIキーをお持ちでない方はこちらの画面からリクルートWEBサービスに登録する事で取得する事ができます。

>BACK TO TOP

オプション機能

他のプルダウン系UIと同じく、コンストラクタの引数にパラメーターを与える事でオプション機能が利用できます。その際には以下の例に示すように、エリア・国・都市 - 3つのプルダウンそれぞれが個別のパラメーター空間を持つ形になります。

各プルダウンのid値を指定したい

デフォルトでは "ab-area-sel" 等のid値でHTML中のプルダウン(SELECTタグ)を探しにいきますが、これを任意のid値で指定したい場合は以下のように書きます:

new ABROAD.UI.Places.Pulldown({
    area:    { id: 'my-area' },
    country: { id: 'my-country' },
    city:    { id: 'my-city' }
});

いずれかひとつだけの指定ももちろん可能です。

>BACK TO TOP

プルダウンの初期値 "指定なし" を別の文言に変えたい

以下のように指定する事で文言を変えられます:

new ABROAD.UI.Places.Pulldown({
    area:    { first_opt_text: '選択してください' },
    country: { first_opt_text: '国を選択してください' },
    city:    { first_opt_text: '都市を選択してください' }
});

このようにエリア・国・都市それぞれ個別に指定します。

実際の動作例:

全部のプルダウンに対してまとめて一括で指定したい

>> こちらの記述を参照してください。

>BACK TO TOP

各地域ごとのツアー件数を表示

以下のようにオプション指定する事で、各地域ごとに該当するAB-ROADツアー情報の数を表示させることができます:

new ABROAD.UI.Places.Pulldown({
    area:    { with_tour_count: true },
    country: { with_tour_count: true },
    city:    { with_tour_count: true }
});

実際の動作例:

毎回Webサービスを駆使して動的に情報を取得する為、件数は日々自動的に変動する形になります。

>BACK TO TOP

プルダウンの初期値を設定

各プルダウンに予め何らかの地域を最初から設定しておきたい場合は以下のように書きます:

new ABROAD.UI.Places.Pulldown({
    city: { val: 'NYC' }
});

実際の動作例:

同様に area または country を指定する事も可能です:

// オーストラリアをデフォルトに
new ABROAD.UI.Places.Pulldown({
    country: { val: 'AU' }
});

// ヨーロッパエリアをデフォルトに
new ABROAD.UI.Places.Pulldown({
    area: { val: 'EUR' }
});

>BACK TO TOP

任意のコード値から、都市や国名を判別したい

都市コード 'A27' の都市名は？この都市が属する国やエリアのコード値および名称は？などを調べるには以下のインスタンスメソッドを使います:

var places = ABROAD.UI.Places.Pulldown();
places.find_item_by_code({
    city: 'A27',
    callback: function ( itm ){
        itm.name;         // アユタヤ
        itm.code;         // A27
        itm.country.name; // タイ
        itm.country.code; // TH
        itm.area.name;    // アジア
        itm.area.code;    // AAS
    }
});

JSONP形式の通信にてWebサービスから情報を取得する為、上記の例のように引数 callback にて結果を処理するための関数を定義する形になります。

同様に area または country で調べる事も可能です:

var places = ABROAD.UI.Places.Pulldown();
places.find_item_by_code({
    country: 'TH',
    callback: function ( itm ){
        itm.name;       // タイ
        itm.area.name;  // アジア
    }
});

同メソッドで返されるオブジェクトの中身はAB-ROAD Webサービスの各エリア・国・都市マスタAPIが返す単体レコードの中身と同一です。詳しくはこれらAPIのドキュメントを参照してください。

>BACK TO TOP

選択肢が刷新されたタイミングで任意の処理を実行したい

インスタンス生成時のオプション指定 - on_update_hook - を各要素ごとに指定することで、プルダウンの選択肢が刷新される度に任意の処理を実施できます。詳しくはこちらのドキュメントを参照してください。

ABROAD.UI.Places.Pulldown({
    area: {
        on_update_hook: function (){ ... }
    },
    country: {
        on_update_hook: function (){ ... }
    },
    city: {
        on_update_hook: function (){ ... }
    }
});

>BACK TO TOP

現在のプルダウン内容を取得

各プルダウンごとの get_current_stat() メソッドにより、現在選択中の値や全選択肢のリスト等の便利情報を取得する事ができます。詳しくはこちらのドキュメントを参照してください。

var p = new ABROAD.UI.Places.Pulldown();
var ar_stat = p.area.get_current_stat();
var co_stat = p.country.get_current_stat();
var ci_stat = p.city.get_current_stat();

>BACK TO TOP