価格帯選択 プルダウン

概要

赤すぐnet 商品検索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="akasugu.ui.js"></script>

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

<select id="aka-price-min-sel"></select>
<select id="aka-price-max-sel"></select>

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

最後にこのようなjavascriptコードを書くことで上限と下限、あわせて2つのプルダウン が自動生成されます。

new Akasugu.UI.Price.Pulldown();

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

$( function(){
    new Akasugu.UI.Price.Pulldown();
});

>BACK TO TOP

上限および下限どちらかだけを使いたい

<select id="aka-price-min-sel"></select>
<!--//
<select id="aka-price-max-sel"></select>
//-->

片方だけのプルダウンを使いたい場合は上記のように、不要な方のSELECTタグを削除してしまえばOKです。対象のエレメントが無い場合、単純に無視される実装になっています。

>BACK TO TOP

オプション機能

以下に紹介するオプション引数はこのような形でそれぞれ「上限用」「下限用」を区別する形で書きます。

new Akasugu.UI.Price.Pulldown({
    'max' : { id: 'my-max-sel' },
    'min' : { id: 'my-min-sel' }
});

下記リンク先で記述されているオプション引数は、すべて上記の形でmax用なのかmin用なのかを指定してください。

利用可能なオプション機能はこちら。

>BACK TO TOP