Tìm hiểu về collection_select

Khi chúng ta submit một form và xuất hiện 1 thuộc tính có nhiều hơn 1 lựa chọn nhưng lại không muốn dùng nested_attributes , không muốn tích checkbox nhàm chán nữa. Chúng ta muốn nó phải mới mẻ và độc đáo hơn, chẳng hạn như phải dropdown nhưng vẫn phải chọn được nhiều lựa chọn. Và RoR cung cấp cho chúng ta 1 form helper khá hay ho là: collection_select

Giới thiệu chung

Cấu tạo cơ bản của form_helper này là:
collection_select(object, method, collection, value_method, text_method)
Khi chuyển sang HTML nó sẽ có dạng:

<select name="object[method]" id="object_method">
 <option value="value_method">text_method</option>
 <option value="value_method">text_method</option>
 
 ...


Với mỗi đối tượng trong mảng collection tương ứng với 1 thẻ option


Chi tiết


Ví dụ , chúng ta muốn tạo mới 1 bài hát và muốn chọn nhiều thể loại cho bài hát đó. Và chúng ta có:

<%= form_for @song do |f| %>
  <%= collection_select(object, method, collection, value_method, text_method) %>
  <%= f.submit %>
<% end %>


1. Object và Method


Chính 2 đối số này quyết định nameid của thẻ select: Và trong trường hợp này:

<%= form_for @song do |f| %>
  <%= f.collection_select :genre_id, collection, value_method, text_method %>
  <%= f.submit %>
<% end %>

HTML:

<select name="song[genre_id]" id="song_genre_id">
  <option value="value_method">text_method</option>
  <option value="value_method">text_method</option>
...

2. Collection

Là một mảng các lựa chọn (options). ví dụ trong hợp này chúng ta sẽ lấy Genre.all, lấy ra 1 mảng gồm tất cả các đối tượng của bảng Genre để lựa chọn

<%= form_for @song do |f| %>
  <%= f.collection_select :genre_name, Genre.all, value_method, text_method %>
  <%= f.submit %>
<% end %>

3. Value_method

Chính là giá trị chúng ta nhận được khi chọn các option có trong collection trên

<%= form_for @song do |f| %>
  <%= f.collection_select :genre_id, Genre.all, :id, text_method %>
  <%= f.submit %>
<% end %>

HTML:

<select name="song[genre_id]" id="song_genre_id">
  <option value="1">text_method</option>
  <option value="2">text_method</option>
  <option value="3">text_method</option>
  <option value="4">text_method</option>
  <option value="5">text_method</option>
...

4. Text_method

Là giá trị hiển thị của mỗi option trong form. Ví dụ chúng ta muốn hiện tên thể loại nhưng khi chọn thì nhận được params chỉ là id:

<%= form_for @song do |f| %>
  <%= f.collection_select :genre_id, Genre.all, :id, :name %>
  <%= f.submit %>
<% end %>

HTML:

<select name="song[genre_id]" id="song_genre_id">
  <option value="1">Blues</option>
  <option value="2">Classic Rock</option>
  <option value="3">Country</option>
  <option value="4">Dance</option>
  <option value="5">Disco</option>
...

Kết Luận

Vừa rồi là bài chia sẻ những kiến thức của em về collection_select và chắc chắn nó vẫn còn xấu và phải chọn nhiều option = cách giữ Ctrl vì thiếu CSS và Javascript . Em sẽ cố gắng chia sẻ tiếp ở bài viết sau.
Tài liệu tham khảo: https://medium.com/@theresamorelli/collection-select-what-the-heck-4e1cabc4be4b