jQuery在某些Mobile / IE瀏覽器上選擇更改

Question

我正在嘗試實現兩個不同選擇框之間的依賴關系。 使用以下jQuery代碼時，大多數普通瀏覽器都可以完美運行（Chrome / FF），但IE / Edge /某些移動瀏覽器不會受到該代碼的影響。

    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();
            } 

        });
    }); 

謝謝！

Answer 1

移動設備上的val（）可能是一個問題。 看看這個答案是否能使您排序：

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

Answer 2

核心問題是隱藏（.hide（））選項對IE和許多移動瀏覽器不起作用。 我最終使用了這種自定義：（並非100％最佳，但足夠好，並且可以在所有瀏覽器上使用）

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);
        } 

    });
});