on dropdown change set another drop down dynamically in rails

events/_forms.html.erb

 <div class="form-group test">
           <%= f.label :auctions, class: "col-lg-4 col-sm-2 control-label required" %>
           <div class="col-lg-8" id="filter">
           <%= f.collection_select :auction_ids, filter_auction, :id, :name, {}, {:multiple => true, class: "form-control acution-class", required: true}%>
           </div>
         </div>

<script>
$( "#dropdown_change" ).change(function() {
      alert( $(this).val());
      var category_id =  parseInt($(this).val())

      $.ajax({
          url: '/events/filtered_auctions.js',
          data: {
              category_id: category_id
          },
          type: 'POST',
//          dataType: 'js',
          success: function(result) {
              alert('++++');
          }
      });

  });
</script>



events.js

$(document).ready(function() {
  $("#event_auction_ids").select2();
  $("#event_bucket_ids").select2();
});



events/filtered_auctions.js.erb

$('#event_auction_ids').html('').select2({data: [{id: '', text: ''}]});
$("#event_auction_ids").html('').select2({data: [
    {id: '', text: ''},
    {id: "<%== @auction.id%>", text: "<%== @auction.name%>"},
    {id: '2', text: 'Youtube'},
    {id: '3', text: 'Instagram'},
    {id: '4', text: 'Pinterest'}]});


events_controller.rb

def filtered_auctions
    # p params['category_id']
    @auction = Auction.first
    respond_to do |format|
      format.js
    end
  end