Creating A Form Containing Two Drop Down Menus?

I am creating a form containing two drop down menus. The second drop down changes every time a user change the selection on the first drop down. So, I have this line below:

Code:

<select name="province" id="province" class="mobileform" onchange="changeCities()">

The problem is when a user (in this case me) is using an iPhone's Safari, when he hits "next" button on the first drop down, it does not change the content of the second drop down. But when he hits "previous", then "next" again, the selections get updated afterwards.

In a shorter sentence, the event listener does not work on the first hit, but it works on the second hit. What am I missing here? What steps do I need to add?