Question

I have two select elements. Making a choice on the first select will build the options for the second select. Works fine on desktop browsers.

On the iPhone, after you make your choice on the first one and chose “Next”, the options do not get filled in the second select. So far, the only ways to do this is to go from the second select, back to the “Previous” one and then back, “Next” to the second select. The other way to click “Done” and then tap the second select.

I’ve tried both .change() and .click() and both produce the same results.

Below is the JS and here is a working example http://damonomania.com/select/

Any suggestions? TIA!

$(document).ready(function(){

    $('#select-1').change(function() {
        show_options();
    });

    function show_options() {
        var id = $('#select-1').val();
        $('#select-2 option:gt(0)').remove();
        $.each(options[id], function(k,v) {
            $('#select-2').append('<option value="' + k + '">' + v + '</option>');
        });
    }
});

var options = {"17":{"835":"870","836":"871"},"18":{"435":"870","436":"871"},"13":{"1":"123546"},"19":{"1213":"4010","1206":"4015"}}

Answer 1

I had the same problem on my site. I was able to fix it by manually polling the selectedIndex property on the select control. That way it fires as soon as you “check” the item in the list. Here’s a jQuery plugin I wrote to do this:

$.fn.quickChange = function(handler) {
    return this.each(function() {
        var self = this;
        self.qcindex = self.selectedIndex;
        var interval;
        function handleChange() {
            if (self.selectedIndex != self.qcindex) {
                self.qcindex = self.selectedIndex;
                handler.apply(self);
            }
        }
        $(self).focus(function() {
            interval = setInterval(handleChange, 100);
        }).blur(function() { window.clearInterval(interval); })
        .change(handleChange); //also wire the change event in case the interval technique isn't supported (chrome on android)
    });
};

You use it just like you would use the “change” event. For instance:

$("#mySelect1").quickChange(function() { 
    var currVal = $(this).val();
    //populate mySelect2
});

Edit: Android does not focus the select when you tap it to select a new value, but it also does not have the same problem that iphone does. So fix it by also wiring the old change event.