Active AdminでRailsアプリの管理者ページを作成しました。想像以上に簡単にめんどくさ管理者ページを作成でき、先人たちに感謝です。モデルの作成・編集ページで、あるselectタグの値が、他のselectタグの中のoptionタグを動的に変更するというものを作成したので、そのメモ。具体的には、都道府県を選択したら、その都道府県に属する市町村だけが、optionタグに表示されるようなイメージです。
コード
今回はAjax等を使わず、jsで手軽さを重視して作成しました。管理者画面のような場合はこれで十分な場合も多いのではないでしょうか。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | f.input :prefecture, :input_html => { :onchange => " var prefecture_id = $(this).val(); $('#search_info_city_id').val(0).find('option').each(function(){ var $option = $(this); var isThisPrefecure = ($option.attr('data-prefecture') == prefecture_id); if (!isThisPrefecure) { $option.remove(); } }); " } f.input :city, collection: City.all.map { |c| [c.name, c.id, {"data-prefecture" => c.prefecture_id}] } |
Active Adminの各モデルのコードにこうやって書いてしまうのはあまり行儀よくないかもですが、とりあえずたくさんある日本全国の市町村から１つの市町村を選択するのは本当に心が折れていたので、だいぶ楽になりました。間違った都道府県を選択してしまうと、ページをリロードしなくてはいけない等問題ありでユーザー用のページにはしっかりと設計しないといけませんが。
参考
Dynamically-adjusting drop down fields on Active Admin form (rails 3.2)
