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

Question

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

score 4 · Accepted Answer · answered Jun 19 '16 at 18:16

4

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>

answered Jun 19 '16 at 18:16

Trudeau Fernandes

171
5

1

Thanks, this works. But can you explain why was it needed to set empty val to select box. I would really like to know – bill_cosby Jun 20 '16 at 01:34
2

That was to reset the value of the select box, so that a change event can be triggered. – Trudeau Fernandes Jun 20 '16 at 02:52

imrealashu · Answer 2 · 2016-06-19T18:13:08.863

1

Here's you're doing it bit wrong.

['<option>one</option>','<option>two</option>','<option>three</option>']
I'd suggest use string.

$("#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').html(options);
});

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

When you're using remove() jQuery function it removes the select2 as well. so reinitializing would be fix for you.

Note: If you want to use array of options then do it like this.

var options = ['first_option','second_option','third_option'];
var optionString = '';
    for(var i = 0; i< options.length; i++){
        optionString += '<option>'+options[i]+'</option>';
    }
 then $('#selector').html(optionString);

Here's a Fiddle that might help https://jsfiddle.net/imrealashu/61tvh76t/3/

edited Jun 19 '16 at 18:13

answered Jun 19 '16 at 17:47

imrealashu

5,089
4
16
28

Nope, commented out `$('#query_product').find('option').remove()` .. still same results – bill_cosby Jun 19 '16 at 17:50
did you try to reinitialize it ? `$('#query_product').append(options).select2();` instead of removing `$('#query_product').find('option').remove()` ? – imrealashu Jun 19 '16 at 17:52
let me create a fiddle for you. – imrealashu Jun 19 '16 at 17:57
Tried that now. Same results :| – bill_cosby Jun 19 '16 at 17:59
I've updated the answer as well as fiddle link. Try that It will work. – imrealashu Jun 19 '16 at 18:14
Fiddle does work, however only after I choose any other option but first, and then i choose first option. It should work the very first time. The same has been happening with me – bill_cosby Jun 20 '16 at 01:32
Trudeau Fenanades's answer above works in both cases. – bill_cosby Jun 20 '16 at 01:32
Yeah, I've tried that answer too. That worked for me. even mine answer worked. – imrealashu Jun 20 '16 at 09:53

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

2 Answers2