jQuery .hide（）selectがサファリで機能しない

Question

$(document).ready(function() { 
    $("#filter-sq-ft-min").change(function(){ 
     $('#filter-sq-ft-max option:first').prop('selected',true); 
     $("#filter-sq-ft-max option").hide(); 
     var maxValue = $(this).val(); 
     $("#filter-sq-ft-max option[value='"+maxValue+"']").show(); 
     $("#filter-sq-ft-max option[value='"+maxValue+"']").nextAll().show(); 

    }); 
}); 

min selectのオプションが選択された後に、max selectからすべてのより小さいオプションを非表示にしたいとします。

Google Chromeでも動作します。

Answer 1

style="display:none;"ブラウザサポートとしてoptionの要素を隠す信頼できる方法ではない場合があります。

html5の場合、hidden attributeをoption要素に追加できます。それに対するサポートはとても良いです。

$("#filter-sq-ft-max option").attr('hidden','');

<option hidden>This option is hidden</option>

Answer 2

DOMがロードされると、readyイベントが起動されます。 CSS &画像のようにロードされるすべての資産について

待ち、 はこのお試しください：

$(window).load(function() { 
    ... 
});