jQuery select change on some Mobile/IE browsers

Question

I'm trying to implement a dependency between two different select boxes. While using the following jQuery code, most normal browsers would work perfectly (Chrome/FF) but IE/Edge/Some Mobile browsers won't be affected by the code.

    jQuery(document).ready(function($){
        $("#selectbox-dependency").change(function() {

           if ($(this).val() == "Banana") {     //value of selectbox #1
                $(".yellow").show();   //classes for each of the options in selectbox #2
                $(".red").hide();
                $(".black").hide();
                $(".gold").hide();
            }else if ($(this).val() == "cherry"){
                $(".yellow").hide();
                $(".red").show();
                $(".black").hide();
                $(".gold").hide();
            } 

        });
    });

Thanks!

I didn't try using .blur() , but the thing is I'm trying to show/hide specific options only when the first select box is changed, so not sure it would help. — tlt2w, Mar 27 '16 at 09:30
did you try with .on('change', function(){ }); ? I've removed the first comment since it had no context for this issue.. I also found this post, maybe it helps [jQuery .change() event not firing in IE](http://stackoverflow.com/questions/9921498/jquery-change-event-not-firing-in-ie) — rmjoia, Mar 27 '16 at 09:46
I tried both `jQuery("#selecbox-dependency").on("change", "select", function(){` and `jQuery(".container").on("change", "#selectbox-dependency", function(){,` but unfortunately I cannot get it to work. — tlt2w, Mar 27 '16 at 10:13

score 0 · Answer 1 · answered Mar 28 '16 at 09:30

0

It might be a problem with val() on mobile. See if this answer is getting you sorted:

http://stackoverflow.com/questions/4709093/jquery-mobile-val-not-working

answered Mar 28 '16 at 09:30

SG1Asgard

64
8

score 0 · Answer 2 · answered Mar 28 '16 at 14:18

The core issue was that hiding (.hide() ) the options didn't work for IE and many mobile browsers. I ended up using this customization: (Not 100% optimal, but good enough, and works on all browsers)

jQuery(document).ready(function($){
    $("#selectbox-dependency").change(function() {

       if ($(this).val() == "Banana") {     //value of selectbox #1
            $(".yellow").prop('disabled', false);   //classes for each of the options in selectbox #2
            $(".red").prop('disabled', true);
            $(".black").prop('disabled', true);
            $(".gold").prop('disabled', true);
        }else if ($(this).val() == "cherry"){
            $(".yellow").prop('disabled', true);
            $(".red").prop('disabled', false);
            $(".black").prop('disabled', true);
            $(".gold").prop('disabled', true);
        } 

    });
});

jQuery select change on some Mobile/IE browsers

2 Answers2