In jQuery, how can I ensure an onchange event fires while setting element values?

Question

I have an address block on a view which can swap some data if the user clicks a checkbox. The javascript function I have for this looks like:

<script type="text/javascript">
    $().ready(function() {
        $("#UseAccountAddress").change(function() {
            if ($(this).attr("checked")) {
                $("#Street1").val($("#PrimaryAddressLine1").val());
                $("#City").val($("#PrimaryCity").val());
                $("#Country").val($("#PrimaryCountryId").val());
                $("#State").val($("#PrimaryStateId").val());
                $("#PostalCode").val($("#PrimaryZip").val());
            }
            else {
                $("#Street1, #City, #Country, #State, #PostalCode").val('');
            }
        });
    });
</script>

For the most part this works really well.

However, "Country" and "State" elements are dropdown lists where the State cascades from the values of Country (ie, choosing "USA" from the country list will populate the States with 50+ states and territories while choosing "Canada" will get you a different list). This cascading list works well on its own (if I manually select "USA" or "Canada" from the Country list the correct values populate the States list).

The issue is that when the UseAccountAddress checkbox is clicked and the value of the Country is changed the State list does not get updated.

It appears that the line ....

$("#Country").val($("#PrimaryCountryId").val());

... does not cause the onchange event to fire.

Is there a line I can add in the javascript to fire the onchange event for the Country so that the State list gets populated correctly?

Answer 1

$("#Country").trigger("change");

I think this will only work with events that are bound via jQuery.

Answer 2

You can trigger the event by calling change() directly:

$("#Country").val($("#PrimaryCountryId").val()).change()