Different selects in one form with same name attribute?

Question are at end of the topic.

class Product < ActiveRecord::Base
belongs_to :categoriesend
class Category < ActiveRecord::Base
has_many :productsend

Categories table has 2 level nesting, for example.
Main category is ‘Men’, sub-category is ‘Accessories’ and
sub-sub-category is ‘Watches’.

https://lh3.googleusercontent.com/-rnrsz1Wits4/UsjHdewNxJI/AAAAAAAAABM/8AtjacUy5jU/s1600/test1.png

Now when user creates new product he must choose category(only main
category is required, but he can also chose sub and sub-sub category
optional).
My idea is following: I created 3 different select boxes with same name
“product[category_id]”, so only the last selected value will be sent to
the server
through params[:product][:category_id].

Main category? required <%= f.select *:category_id*, Category.where('category_id IS ?', nil).collect {|c| [c.name, c.id]}, { include_blank: "Select category..." }, id: 'main-category', class: 'form-control' %>
What type? optional <%= f.select *:category_id*, {}, {}, class: 'form-control' %>
What type? optional <%= f.select *:category_id*, {}, {}, class: 'form-control' %>

For populating 2nd select(sub-category) and 3rd(sub-sub-categories) i’m
using ajax call where 2nd and 3rd select are initial hidden (display:
none) through CSS.

$(‘#main-category, .category-level-1 > select’).change(function() {
var selectBox = this.id;
var selectedValue = $(this).val();
var url = ‘/categories/’ + selectedValue + ‘/subcategories’;

$.get(url, function(data) { *createSelect*(data, *selectBox*); 

});});

function createSelect(data, selectBox) {
var $currentSelect = null;

if (selectBox == ‘main-category’) {
$(‘.category-level-1’).show();
$(‘.category-level-2’).hide();
$(‘.category-level-1 > select’).find(‘option’).remove();

$currentSelect = $('.category-level-1 > select');

}
else {
$(‘.category-level-2’).show();
$(‘.category-level-2 > select’).find(‘option’).remove();

$currentSelect = $('.category-level-2 > select');

}

$currentSelect.append(‘Select
Category…’);
for(var i=0; i<data.length; i++) {
$currentSelect.append(‘’ +
data[i].name + ‘’);
}
}

Where ajax call is sent to following route (categories controller)def
subcategories id = params[:id] @subcategories =
Category.where(‘category_id = ?’, id) render json: @subcategories end
So for final result i have following:

https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.png
https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.pngFirst
of all is it normal to have different inputs in one form with same names
created manually like i did in this
example?
https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.pngFor
some reason it seem like ‘code-smell’ to me. I’m relatively new to rails
so
wanted to ask am’i violating some good practices with this
code?
https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.pngCan
you suggest better way to achieve same
results?
https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.png

Thanks.
https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.png