Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

cookie_good's avatar

bootstrap d-none not working on option element

So here's something.

This isn't working.

<select name="my_variable">
    <option value="hidden" class="d-none">I want to momentarily hide this</option>
    <option value="not_hidden">I just to see this one right now</option>
</select>

Using bootstrap 4

Both options are showing.

0 likes
4 replies
tykus's avatar
tykus
6 years ago
Best Answer
Level 104

Just use the hidden attribute

<select name="my_variable">
    <option value="">Please select...</option>
    <option value="hidden" hidden>I want to momentarily hide this</option>
    <option value="not_hidden">I just to see this one right now</option>
</select>

Add an empty (invalid) option at the beginnning as a placeholder!

tykus's avatar

Of course; depending on the javascript library/framework (or none) you will mostly like have the functionality available once you can target the element, e.g.

let option = document.querySelector('option[value=hidden]');

option.setAttribute("disabled", "");
cookie_good's avatar

This is what I did.

$('#myElement option').detach();

Hope it helps someone.

Please or to participate in this conversation.