Select or Die Demo

BASIC EXAMPLE
（基本）

select要素を指定して、Select or Dieを実行します。

$("select").selectOrDie();

CUSTOM CLASS/ID
（class、idを指定してデザインをコントロール）

同じページ内で、複数のselectを異なる見た目にしたい場合は、customClassやcustomIDを指定します。
デザインはcssを用意します。
このサンプルでは、selectordie_theme_02.cssを使っています。

$("select").selectOrDie({
    customClass: "custom",
    customID:    "custom"
});

or

$("select").selectOrDie();
<select data-custom-id="custom" data-custom-class="custom">

Placeholder - alt. 1
（プレースホルダーを設定 1）

placeholderでプレースホルダーを設定することができます。プレースホルダーに設定した内容は、ユーザーがプルダウンをクリックするまで表示されます。

$("select").selectOrDie({
placeholder: "選択して下さい"
});

or

$("select").selectOrDie();
<select data-placeholder="選択して下さい">

Placeholder - alt. 2
（プレースホルダーを設定 2）

placeholderOptionをtrueにすると、<option>の1つ目に指定した値とプレースホルダーとして利用することができます。

$("select").selectOrDie({
placeholderOption: true
});

or

$("select").selectOrDie();
<select data-placeholder-option="true">

Prefix
（先頭に文字列を追加）

prefixを指定すると、<option>の値の先頭に文字列を追加して表示することができます。prefixが指定されると、placeholder、placeholderOptionは無視されます。

$("select").selectOrDie({
prefix: "Number:"
});

or

$("select").selectOrDie();
<select data-prefix="Number:">

Keyboard cycle
（キーボード操作でループを許可）

cycleをtrueにすると、ユーザーが選択肢をキーボードの上下矢印で操作した際に、一番最後の選択肢の次に、一番最初の選択肢に戻ります。

$("select").selectOrDie({
cycle: true
});

or

$("select").selectOrDie();
<select data-cycle="true">

Size（表示項目数）

sizeでは表示項目数を設定できます。下の例ではoptionは10個ありますが、siteに5を設定してあるので、一度に表示されるのは5個までであとはスクロールで表示します。

$("select").selectOrDie({
size: 5
});

or

$("select").selectOrDie();
<select data-size="5">

Tabindex（タブキー移動の順序制御）

tabindexでタブキーでの移動順序を制御できます。tabindexの詳細はこちら。

$("select").selectOrDie({
tabindex: 1
});

or

$("select").selectOrDie();
<select data-tabindex="1">

Callback（選択したら実行する）

選択肢を選択したら何かを実行することができます。onchangeなどが使えます。

$("select").selectOrDie({
onChange: function() { alert( $(this).val() ) }
});