javascriptjqueryjquery-select2select2-rails

Select2 doesn't trigger on change/selection of first option

What I am doing: Dynamically adding options to a select box when modal popup opens. And waiting for on change trigger to respond.

Observation: It pops up alert box for all options but first. Below is the code. 

$("#query_product").on("change", function(e){
  alert(1)
});

$("#add_condition_modal").on( "shown.bs.modal", function() {
  options = ['<option>one</option>','<option>two</option>','<option>three</option>']
  $('#query_product').find('option').remove()
  $('#query_product').append(options); 
});

<select id="query_product" name="query_product" required></select>

Another Observation: When I prefill the html select box with same options and then select the first option or any option, I see the alert popup. Now I am confused.

I tried using event delegation for dynamically added elements.

$(document).on("change","#query_product", function() {

Nothing seems to work. Any help will be appreciated. TIA

Solution

  • Try this:

    $("#query_product").on("change", function(e){
  alert(1)
});

$("#add_condition_modal").on( "shown.bs.modal", function() {
  options = ['<option value="one">one</option>','<option value="two">two</option>','<option value="three">three</option>']
  $('#query_product').find('option').remove();
  $('#query_product').append(options); 
  $('#query_product').val("");
});

<select id="query_product" name="query_product" required></select>