色々調べましたがRailsだけの機能では無理っぽいので、jqueryを使って対応することにしました。
selectされたらhiddenフィールドにどんどん追記していく手法です。
モデル
参照先モデル(GroupNumber)
app/models/group_number.rb
- viewでDBカラムに存在しない選択フォームを表示するため、
attr_accessor :select_order_number
を追加。
- select_order_numberフォームの選択項目は
ORDERS
定数を定義
class GroupNumber < ActiveRecord::Base
attr_accessor :select_order_number
ORDERS = %w(オーダー1 オーダー2 オーダー3 オーダー4 オーダー5)
has_many :order_numbers, dependent: :destroy
accepts_nested_attributes_for :order_numbers
参照元モデル(OrderNumber)
app/models/order_number.rb
class OrderNumber < ActiveRecord::Base
belongs_to :group_number
end
コントローラ
app/controllers/group_numbers_controler.rb
- createメソッドでparamsを操作し、viewから渡ってくる空の値を削除しています。これをしないとorder_numberがブランクのレコードが作成されてしまいます。
- 先ほどGroupNumberモデルでつくった
select_order_number
をStrong Parametersに追加します。これを追加しないと、validationエラーなどでフォーム画面にリダイレクトがかかった時、select_order_numberセレクトフォームが未選択の状態になってしまいます。
def new
@group_number = GroupNumber.new
@group_number.order_numbers.build
end
def create
params[:group_number][:order_numbers_attributes].delete_if { |key, order_number| order_number[:order_number].blank? }
@group_number = GroupNumber.new(group_number_params)
respond_to do |format|
if @group_number.save
format.html { redirect_to @group_number, notice: 'GroupNumber was successfully created.' }
format.json { render :show, status: :created, location: @group_number }
else
format.html { render :new }
format.json { render json: @group_number.errors, status: :unprocessable_entity }
end
end
end
...
private
def group_number_params
params.require(:group_number).permit(
:group_number,
:group_name,
:select_order_number => [],
order_numbers_attributes: [:id, :order_number]
)
end
ビュー
**app/views/group_numbers/_form.html.erb
...
<div class="form-group">
<%= f.label :group_number %>
<%= f.text_field :group_number %>
</div>
<div class="form-group">
<%= f.label :group_name %>
<%= f.text_field :group_name %>
</div>
<div class="form-group">
<%= f.label :group_numbers, "契約番号" %><br>
<%= f.select :select_order_number, GroupNumber::ORDERS, {include_blank: false}, multiple: true %>
<%= f.fields_for :order_numbers do |ff| %>
<%= ff.hidden_field :order_number, class: "from-select-to-hidden", "data-id" => 0 %><br />
<% end %>
</div>
jquery
app/assets/javascripts/group_numbers.js
- select_order_numberセレクトフォームの選択内容が変化したらhiddenに選択されたvalueを入れていきます。
$(function () {
$('form').on('change', 'select', function (event) {
var $this = $(this),
vals = $this.val(),
$next = $this.next();
$this.siblings(".from-select-to-hidden").each(function (i) {
if (i == 0) {
$(this).val("");
} else {
$(this).remove();
}
});
$.each(vals, function (i, val) {
var time = new Date().getTime(),
regexp = new RegExp($next.data('id'), 'g'),
id = $next.attr('id'),
name = $next.attr('name'),
newId = id.replace(regexp, time),
newName = name.replace(regexp, time);
$next.after($('<input type="hidden">').attr('id', newId).attr('name', newName).val(val).addClass("from-select-to-hidden"));
});
event.preventDefault();
});
});
このjqueryが思惑どおりに動くにはfrom-select-to-hidden
というhiddenフィールドで指定ているクラス名をviewとjqueryできちんと書くことがポイントになりますが、この辺りがいまいち気に入っていません。何かコメントいただけると幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。