javascript - 最初のオプションの変更/選択時に Select2 がトリガーされない

Question

私がやっていること：モーダルポップアップが開いたときに選択ボックスにオプションを動的に追加します。on changeそして、トリガーが応答するのを待っています。

観察: 最初以外のすべてのオプションに対して警告ボックスがポップアップします。以下はコードです。

$("#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>

別の観察: HTML 選択ボックスに同じオプションを事前に入力してから、最初のオプションまたは任意のオプションを選択すると、アラート ポップアップが表示されます。今、私は混乱しています。

動的に追加された要素にイベント委任を使用してみました。

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

何も機能していないようです。どんな助けでも大歓迎です。ティア