CODEWITHSUNDEEP
javascriptjquery-mobilecordova
PiTheNumber
PiTheNumber

Reputation: 23562

jquery mobile: Selectmenu need to select two times

I have one input fields with an autocomplete (#street) and one with a selectmenu (#number). If you select a street the selectmenu with the numbers get's filled from a local array. Works fine in FF and Chrome, but not on the iPhone.

The problem is that the selectmenu does not work the first time I select something. I can see the options, select something but this is ignored. Let's say I select 3 and it keeps number 1. If I try again it works.

The problem appears only if I change street first. If I don't change the street the number select works just fine. So I guess the select menu is not fully created or something like this.

HTML

<div>
    <label for="street">Bitte wählen Sie Ihre Straße:</label>
    <input name="steet" id="street" style="z-index: 3; position: relative;" />
</div>
<div style="margin-top: 10px;">
    <label for="number">Hausnummer:</label>
    <select name="number" id="number" ></select>
</div>

JS to fill #number after #street was changed:

    $('#street').autocomplete({
        source: ELW.data.streets,
        minLength: 3,
        change: function(event, ui)
        {
            // alle Hausnummern löschen
            $("#number option").remove();
            $('#number').val('');

            // Straße ausgewählt?
            var numbers = ELW.address.getNumbers($('#street').val());
            if (numbers)
            {
                // Hausnummern einfügen
                $.each(numbers, function(index, value){
                    value = value.split(':');
                    $("<option/>").val(value[0] + ':' 
                         + value[1]).text(value[1]).appendTo("#number");
                });
            }
            // update
            $("#number option:first").attr('selected', true);
            $('#number').selectmenu("refresh");
        }
    });

Upvotes: 1

Views: 626

Answers (2)

PiTheNumber
PiTheNumber

Reputation: 23562

Ok, finally I found a solution.

You can prevent the iPhone from using it's native menu wheel by setting data-native-menu="false". With the alternative select menu from jquery, it works fine:

<select name="number" id="number" data-native-menu="false" ></select>

Found it in the manual.

Upvotes: 0

Liam
Liam

Reputation: 2837

Did you try in Safari ? Safari should give you the solution for the problem you are facing on iphone.

Upvotes: 1

Related Questions