title: Select (trigger change) the dynamically added option of a select dropdown in Javascript/jQuery
body: <p>I have a select dropdown in my webpage created dynamically as</p>
  
  <pre><code>&lt;select id="mainDropDown" class="Field"&gt;
     &lt;option data-id="-1"&gt;Select your option&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I have it dynamically populated, when another event (button click) occurs</p>
  
  <pre><code>$('body').on("click", "#addOption", function () {
          createOption();
          $('#mainDropDown').val($("#newOption").val()).trigger('change');
          $("#newOption").val("")
  });
  
  function createOption() 
  { 
    for (var k in OptionList) {   // OptionList has the list of options already added to the dropdown
       tempSelectedState = "";
       if ($("#newOption").val() == OptionList[k].name) {
          tempSelectedState = "selected";
       }
       $("#mainDropDown").append("&lt;option data-id='" + OptionList[k].ID + "' " + tempSelectedState + "&gt;" + OptionList[k].name + "&lt;/option&gt;");
       //$('body #mainDropDown').val().trigger('change');
    }
  }
  </code></pre>
  
  <p>Here the problem,  is the select change event is not getting called.</p>
  
  <pre><code>$('#mainDropDown').change(function () {
  //.................
  }
  </code></pre>
  
  <p>I am trying to call it explicitly at </p>
  
  <pre><code>$('#mainDropDown').val($("#newOption").val()).trigger('change');
  </code></pre>
  
  <p>But when this is called, The dynamically added option to the mainDropDown is not populated yet, and hence not accessible. </p>
  
  <p>The actual functionality needed is when a new option is added, it must be selected by default, also the value change event must be triggered successfully.</p>