I have a jquery script which at first hide all select options:
$('option[data-start="1"]').hide();
and then shows options based on user select of other input.
$('option[data-variable1="' + variable1x + '"][data-variable2="' + variable2x + '"]').show();
Everything works great, but on Safari .hide() doesn't work. I know about workaround:
$('option[data-start="1"]').prop('disabled', true);
$('option[data-variable1="' + variable1x + '"][data-variable2="' + variable2x + '"]').prop('disabled', false);
But this only turns off some options. I have dozens of options, so there is long list of inactive options. I tried hiding inactive options, but Safari probably ignores this code:
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;}
Could you help me with some workaround for Safari?
to get a full browser compatible to hide and show elements
try to use the hidden attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
to use it in your code to hide option
$('option[data-start="1"]').attr('hidden','hidden');
and to show an option use
$('option[data-start="1"]').removeAttr('hidden','hidden');
here a working fiddle https://jsfiddle.net/zj2kLxc8/1/