出発地選択 プルダウン

概要

AB-ROAD 海外旅行検索API に検索クエリ「出発地」パラメータを渡す事で、「関西から出発するツアーのみを検索」といった絞込みができます。これは、その出発地を選択する為のプルダウンUIを簡単に生成するためのモジュールです。

>BACK TO TOP

サンプル

>BACK TO TOP

動作条件

• jQuery v1.0 以降

>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-dept-sel"></select>

* name属性を設定せずとも、自動で name="dept" が付与されます。

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

new ABROAD.UI.Dept.Pulldown();

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

$( function(){
    new ABROAD.UI.Dept.Pulldown();
});

>BACK TO TOP

オプション機能

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

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

new ABROAD.UI.Dept.Pulldown({
    id: 'my-own-dept'
});

>BACK TO TOP

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

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

new ABROAD.UI.Dept.Pulldown({
    first_opt_text: '選択してください' 
});

ほかのプルダウンもまとめて、一括で指定したい

以下のように、クラス変数 Recruit.UI.Base.Pulldown.first_opt_text に値を設定することで、以降すべてのプルダウン系のUIライブラリに対して有効になります:

Recruit.UI.Base.Pulldown.first_opt_text = '選択してください';
new ABROAD.UI.Dept.Pulldown();
new ABROAD.UI.Order.Pulldown();
...

>BACK TO TOP

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

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

new ABROAD.UI.Dept.Pulldown({
    val: 'NGO'
});

実際の動作例:

>BACK TO TOP

プルダウンのname値を指定

デフォルトでは name="dept" が付与されますが、これを任意の値に指定する事が出来ます:

new ABROAD.UI.Dept.Pulldown({
    name: 'my-dept-name'
});

実際の動作例:

>BACK TO TOP

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

プルダウンの選択肢が刷新された直後のタイミング (＝プルダウン初期化のタイミング) で任意の処理を実行したい場合は、以下のようにオプション指定 - on_update_hook - に任意の処理を記述した無名関数を設定します:

ABROAD.UI.Dept.Pulldown({
    on_update_hook: function (){
        alert( 'pulldown initialized' );
    }
});

この時、以下のプロパティから各種状態を取得できます:

this.get_current_stat()	取得可能な情報は下記 "現在のプルダウン内容を取得" の項を参照
this.elm	プルダウン要素の jQuery オブジェクト。$( '#ab-dept-sel' ) の戻り値と同じ。

ABROAD.UI.Dept.Pulldown({
    on_update_hook: function (){
        var obj = this.get_current_stat();
        alert( obj.list.length );  // 選択肢の数
    }
});

簡単なサンプルはこちら:

on_update_hook のサンプルコード

>BACK TO TOP

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

get_current_stat() メソッドにて、プルダウン選択肢の値とラベルをリストで取得したり、現在選択中の値を取得する等、プルダウン情報を別途加工する際に便利な情報を取得できます:

var p = new ABROAD.UI.Dept.Pulldown();
var obj = p.get_current_stat()

この時の戻り値 (object) の中身は以下の通りです:

obj.name	プルダウンのname属性 - 例) ab-dept-sel
obj.val	現在選択中の値 - 例) NGO
obj.list	プルダウン選択肢の値と名称を含んだ Array オブジェクト。Array 内の各要素は val (値) と text (名称) プロパティを保持 - 例) obj.list[0].val // TYO obj.list[0].text // 東京

簡単なサンプルはこちら:

get_current_stat() のサンプルコード

>BACK TO TOP