Is there a way to populate selected tags to the drop down list using Jquery and JS on activeadmin rails?

Viewed 22
  • 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.

0 Answers
Related