jQuery/Javascript - detect changes in select option when val is change in browsers console

Question

I have a code that triggers when the select option is changed, however when the value is changed in browsers console it will not detect the change event.

$("#additional_myfield3").on('change', function(){
// recalculation of shipping cost
});

UPDATE This is in WooCommerce, changes in select option will update the shipping cost. By default shipping is $0, but when changed it will recalculate and will range from $5-$10.

• Changing value in console

jQuery('select#additional_myfield3').val('Location 1');

The problem is when option is changed via console, it will not update the shipping cost. In backend the TEAM is changed to "Location 1" but the shipping cost is still 0, when it should be $5.

Answer 1

Make sure to initialize this after the page has loaded, as in

window.onload = function() {
  $("#additional_myfield3").on('change', function(){
     alert('changed');
  });
}

Answer 2

 $("#additional_myfield3").on('change', function() { alert('changed'); }); //on console should trigger change $("#additional_myfield3").val("2").trigger("change");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- on input should trigger change --> <select id="additional_myfield3"> <option value="1">1 <option value="2">2 </select>