I am trying to use Jquery on active admin rails for populating multiple selected tags from select2 to the drop-down list but I don't know how to use Jquery for populating the tags on the drop-down list.
When I am trying to use the change function, then we can get the selected tags from the select2 field on alert but onto the dropdown list, there are only Yes/No options available which mean populating is not happening to the dropdown.
my jquery code for populating is:-
$(document).on("change", [".multipleSelect"],function() {
var total = [];
$(".multipleSelect").each(function(){
total = $(this).val();
});
alert(total) -> in this alert we get those selected tags
$(".updateUnit").val(total);
});
- In the above code multipleSelect and updateUnit are those classes where I select options (like box, bundle, bora so on..,) and where I want to populate selected tags as a dropdown list respectively.
My active admin form code are:
f.inputs 'Products Details' do
f.input :name, input_html: { required: true }
f.input :units, collection: Unit.all.pluck(:name), as: :select,
input_html: { multiple: true, class: 'multipleSelect' }
f.input :description, input_html: { rows: 2, class: 'updateUnit' }
f.input :images, as: :file, input_html: { multiple: true, accept: NgConstant::IMAGE_TYPE.join(', ') }
if f.object.images.attached? # to display previously stored file
f.object.images.each do |file|
li do
figure do
image_tag file, width: 50, height: 50, title: file.filename
end
div do
if f.object.images.present? && (@object = file.id)
link_to 'Delete', delete_individual_admin_file_path(file.id), method: :delete,
data: { confirm: 'Are you sure you want to delete this file?' }
end
end
end
end
end
end
- In the above code mutipleSelect class is used where select multiple tags that have to populate on the drop-down list of the nested attributes.
My nested attribute forms look like:
f.inputs 'Unit Conversion' do
table class: 'product_unit_header' do
thead do
tr do
th 'From Unit', class: 'form-table__col'
th 'To Unit', class: 'form-table__col'
th 'Conversion Rate', class: 'form-table__col'
th 'Destroy', class: 'form-table__col'
end
end
end
f.has_many :product_units, new_record: 'Add Conversion', heading: false, allow_destroy: true do |x|
x.input :from_unit, as: :select, collection: f.object.units, label: false, input_html: { required: true , class: 'updateUnit'}
x.input :to_unit, as: :select, collection: f.object.units, label: false, input_html: { required: true }
x.input :unit_conversion, label: false, input_html: { required: true }
end
end
Some of my screenshots are:
I hope someone is an expert on JS, Jquery, and Ajax for populating selected multiple tags from select2 on the dropdown list.