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中的所有较小选项。

但它只适用于谷歌浏览器。

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

确实，Safari 和 IE 会忽略 <option> 元素的样式。我遇到了这个问题，对我来说，添加另一个答案中提到的 hidden 属性不起作用。所以我最终只是禁用了它们，这对我的用例有用：

$("#filter-sq-ft-min").change(function(){
  $('#filter-sq-ft-max option:first').prop('selected',true);

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

  var maxValue = $(this).val();

  $("#filter-sq-ft-max option[value='"+maxValue+"']")
    .show()
    .removeAttr('disabled');

  $("#filter-sq-ft-max option[value='"+maxValue+"']")
    .nextAll()
    .show()
    .removeAttr('disabled');
});

Answer 3

请添加 optgroup 并使其成为选项组，然后使用禁用属性禁用 optgroup

for hidding 
jQuery('select optgroup[id="addon"]').attr( "disabled", "disabled" ); for mac safari    
jQuery('select optgroup[id="addon"]').prop('disabled', true); //for iphone safari
for showing use
jQuery('optgroup').removeAttr('disabled);

Answer 4

加载DOM时会触发ready事件。

等待所有资产加载，如css＆amp;图片，试试这个：

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

jQuery .hide（）select在safari中不起作用

4 个答案: