Skip to content

Instantly share code, notes, and snippets.

@ziadoz

ziadoz/select-options-hide.html

Last active August 6, 2024 13:40
Show Gist options
  • Save ziadoz/e8e33a8ac07d492044efd05b9d112c9a to your computer and use it in GitHub Desktop.
Save ziadoz/e8e33a8ac07d492044efd05b9d112c9a to your computer and use it in GitHub Desktop.
Download ZIP
Hide/Disable Select Options in Browsers (Safari Bug)
Raw
select-options-hide.html
<!-- Most browsers support "display: none;" on select options to hide them. -->
<!-- However, Safari doesn't support this, and will still display the option. -->
<!-- The solution is to "display: none;" and disable the option. -->
<!-- The option will be hidden in most browsers, but still disabled in Safari. -->
<select>
<option></option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="qux">Qux</option>
</select>
<script>
const hideOption = (option) => {
option.style = 'display: none';
option.disabled = true;
};
const select = document.querySelector('select');
hideOption(select.options[1]);
hideOption(select.options[2]);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment