Select2 is used on Woocommerce checkout page, billing_state_id is a custom field required by a shipping company. On selection, the values do change properly, however, to make update_checkout work, the same city has to be selected twice repeatedly. I just can’t figure it out.

initSelection: function (element, callback) {
    element.on('select2-selecting', function( event ) {
        $('#billing_state_id').val( event.object.city_id );
        $('#billing_city').val( event.object.city_name );
        $( document.body ).trigger( 'update_checkout' );                    
        'id': element.val() !== '' ? element.val() : this.default_value,
        'text': element.val() !== '' ? element.val() : this.default_value

Read more here: Select2 initSelection works on second try, not on first


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Wordpress related questions and answers: