Table of Contents
オプションタグを options_for_select で生成する方法についてまとめました。
環境
- Ruby 2.2.3
- Rails 4.2.5
options_for_select
配列、ハッシュからオプションタグを生成するメソッドです。 options_from_collectin_for_select を知らなくても、 これさえあればオプションタグは作れます。
基本
単純な配列を渡すと、配列要素の値がオプションになります。
|
1 2 3 |
options_for_select([ "VISA", "MasterCard" ]) # => <option>VISA</option> # => <option>MasterCard</option> |
後ろに選択された値を渡すことで、初期値を設定できます。
|
1 2 3 |
options_for_select([ "VISA", "MasterCard" ], "MasterCard") # => <option>VISA</option> # => <option selected="selected">MasterCard</option> |
選択された値を複数渡すには、配列で渡します。
|
1 2 3 4 |
options_for_select([ "VISA", "MasterCard", "Discover" ], ["VISA", "Discover"]) # => <option selected="selected">VISA</option> # => <option>MasterCard</option> # => <option selected="selected">Discover</option> |
値と表示を別にする
option タグ の value を個別に設定する場合は、 配列またはハッシュを使って value と 表示名称 を渡します。 配列の場合は 表示名を最初の要素に、 value を次の要素にします。 ハッシュの場合は 表示名をキーに、 value を値に設定します。
選択されているものを設定するには、上と同じ方法で、2番目の引数に value 値 を 値または配列 で渡します。
|
1 2 3 4 5 6 7 |
options_for_select([["Dollar", "$"], ["Kroner", "DKK"]]) # => <option value="$">Dollar</option> # => <option value="DKK">Kroner</option> options_for_select({ "Basic" => "$20", "Plus" => "$40" }, "$40") # => <option value="$20">Basic</option> # => <option value="$40" selected="selected">Plus</option> |
HTML属性を追加する
html属性を追加するには、 配列になっている各オプションの中にハッシュを入れます。
|
1 2 3 4 5 6 7 8 |
options_for_select([ "Denmark", ["USA", {class: 'bold'}], "Sweden" ], ["USA", "Sweden"]) # => <option value="Denmark">Denmark</option> # => <option value="USA" class="bold" selected="selected">USA</option> # => <option value="Sweden" selected="selected">Sweden</option> options_for_select([["Dollar", "$", {class: "bold"}], ["Kroner", "DKK", {onclick: "alert('HI');"}]]) # => <option value="$" class="bold">Dollar</option> # => <option value="DKK" onclick="alert('HI');">Kroner</option> |
オプションをハッシュで渡す場合にもやり方があるかもしれませんが、 公式のAPIドキュメントには Array と書かれているので Array を使います。 この HTML属性は option_html_attributes によって配列から抽出されます。
|
1 2 3 4 5 6 7 |
def option_html_attributes(element) if Array === element element.select { |e| Hash === e }.reduce({}, :merge!) else {} end end |
最初の引数に ["a", ["b", "c"]] を渡していれば element には "a"、["b", "c"] が渡されます。 配列で {a: 1, b: 2} を渡した場合には element には ["a", 1]、["b", 2] が渡されます。
使用不可能なオプションを指定する
初期値を指定する場合と似ていますが、 ここでは ハッシュ として disabled の値に、 使用不可にするオプション value 値 の 値または配列 を設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
options_for_select(["Free", "Basic", "Advanced", "Super Platinum"], disabled: "Super Platinum") # => <option value="Free">Free</option> # => <option value="Basic">Basic</option> # => <option value="Advanced">Advanced</option> # => <option value="Super Platinum" disabled="disabled">Super Platinum</option> options_for_select(["Free", "Basic", "Advanced", "Super Platinum"], disabled: ["Advanced", "Super Platinum"]) # => <option value="Free">Free</option> # => <option value="Basic">Basic</option> # => <option value="Advanced" disabled="disabled">Advanced</option> # => <option value="Super Platinum" disabled="disabled">Super Platinum</option> options_for_select(["Free", "Basic", "Advanced", "Super Platinum"], selected: "Free", disabled: "Super Platinum") # => <option value="Free" selected="selected">Free</option> # => <option value="Basic">Basic</option> # => <option value="Advanced">Advanced</option> # => <option value="Super Platinum" disabled="disabled">Super Platinum</option> |
最後の引数に設定できるのは selected と disabled のみです。 最後の引数は、 options_for_select の中で呼び出される、 extract_selected_and_disabled によって処理されます。
|
1 2 3 |
selected, disabled = extract_selected_and_disabled(selected).map do |r| Array(r).map { |item| item.to_s } end |


