Safari jquery 选择选项 .hide() 替代

Question

我有一个 jquery 脚本，它首先隐藏所有选择选项：

$('option[data-start="1"]').hide();

然后根据用户选择的其他输入显示选项。

$('option[data-variable1="' + variable1x + '"][data-variable2="' + variable2x + '"]').show();

一切都很好，但在 Safari 上 .hide() 不起作用。 我知道解决方法：

$('option[data-start="1"]').prop('disabled', true);
$('option[data-variable1="' + variable1x + '"][data-variable2="' + variable2x + '"]').prop('disabled', false);

但这只会关闭一些选项。我有几十个选项，所以有一长串不活动的选项。 我尝试隐藏非活动选项，但 Safari 可能会忽略此代码：

select option[disabled="disabled"]{display:none !important;width:0;height:0;visibility: hidden;opacity:0;}
select option:disabled { display:none !important;height:0;width:0;visibility: hidden;opacity:0;}

您能帮我解决一些 Safari 的问题吗？

Answer 1

获得兼容隐藏和显示元素的完整浏览器 尝试使用hidden 属性 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

在你的代码中使用它来隐藏option

$('option[data-start="1"]').attr('hidden','hidden');

并显示option 使用

$('option[data-start="1"]').removeAttr('hidden','hidden');

这是一个工作小提琴https://jsfiddle.net/zj2kLxc8/1/