0

I have a cascading state to city select box pair. The user chooses a state and an ajax routine updates the city select box with the state's cities from the database.

The select boxes have a custom styling.

User flow for IPhone:

  1. User presses state box
  2. Iphone native select box ui screen pops up from the bottom
  3. User chooses appropriate state
  4. The city box updates and refreshes but the native Iphone ui select box picker values do not update.

If the user presses the done button then presses the city select box it works fine.

I need the Iphone native ui to update it's values.

$('#select_destination_state').live('change',function(e)  {

  var stateVal = $(this).val();
  dstate = stateVal;
    $.ajax({
        url: '/inc/cityhandler.php?state='+ stateVal,

        success: function(data) {
          //alert(data);
          $('#select_destination_city').html(data);
          $('#select_destination_city option:first-child').attr("selected", "selected");
          $('#select_destination_city').selectmenu();
          $('#select_destination_city').selectmenu("refresh", true);

          select_to_miles(currSeg); //ajax function to get mileage

        }
      });
  });
mrmonroe
  • 325
  • 1
  • 10

1 Answers1

0

You can find a number of suggestions and workarounds for this issue here: Strange behavior of select/dropdown's onchange() JS event when using 'Next' on Mobile Safari Dropdown list item select box

Community
  • 1
  • 1
tdg5
  • 1,131
  • 7
  • 6