display: none does not work inside option tag in html
display: none; does not work inside option tag in html. Why?
html
<select>
<option data-color="green"> Option 1
<div style="display: none;"> hiddenText </div>
</option>
<option data-color="red"> Option 1
</option>
</select>
jsfiddle
I am applying the style="display: none;" to the node with textContent being equal to hiddenText. So, I am expecting not to see the hiddenText, but I still see it. What am I missing here?
Thank you.
If we change the div inside option to span it still does not work.
html css select option display
asked Nov 14 '18 at 13:32
Yaroslav TrofimovYaroslav Trofimov
7219
add a comment |
display: none; does not work inside option tag in html. Why?
html
<select>
<option data-color="green"> Option 1
<div style="display: none;"> hiddenText </div>
</option>
<option data-color="red"> Option 1
</option>
</select>
jsfiddle
I am applying the style="display: none;" to the node with textContent being equal to hiddenText. So, I am expecting not to see the hiddenText, but I still see it. What am I missing here?
Thank you.
If we change the div inside option to span it still does not work.
html css select option display
asked Nov 14 '18 at 13:32
Yaroslav TrofimovYaroslav Trofimov
7219
1
I don't think it's possible to add adivinside anoptiontag. MDN quote: Permitted content: Text, possibly with escaped characters (like é)
– enxaneta
Nov 14 '18 at 13:35
@enxaneta, thank you. Any suggestions how can I overcome this?
– Yaroslav Trofimov
Nov 14 '18 at 13:39
Possible duplicate of Hide options in a select list using jQuery
– CodeBlaze
Nov 14 '18 at 13:48
I thought I can do it with pseudo elements but it doesn't work either. Please explain why do you need to hide text inside an option. Maybe there is a workaround.
– enxaneta
Nov 14 '18 at 13:51
add a comment |
display: none; does not work inside option tag in html. Why?
html
<select>
<option data-color="green"> Option 1
<div style="display: none;"> hiddenText </div>
</option>
<option data-color="red"> Option 1
</option>
</select>
jsfiddle
I am applying the style="display: none;" to the node with textContent being equal to hiddenText. So, I am expecting not to see the hiddenText, but I still see it. What am I missing here?
Thank you.
If we change the div inside option to span it still does not work.
html css select option display
asked Nov 14 '18 at 13:32
Yaroslav TrofimovYaroslav Trofimov
7219
display: none; does not work inside option tag in html. Why?
html
<select>
<option data-color="green"> Option 1
<div style="display: none;"> hiddenText </div>
</option>
<option data-color="red"> Option 1
</option>
</select>
jsfiddle
I am applying the style="display: none;" to the node with textContent being equal to hiddenText. So, I am expecting not to see the hiddenText, but I still see it. What am I missing here?
Thank you.
If we change the div inside option to span it still does not work.
html css select option display
html css select option display
asked Nov 14 '18 at 13:32
Yaroslav TrofimovYaroslav Trofimov
7219
asked Nov 14 '18 at 13:32
Yaroslav TrofimovYaroslav Trofimov
7219
asked Nov 14 '18 at 13:32
Yaroslav TrofimovYaroslav Trofimov
7219
asked Nov 14 '18 at 13:32
Yaroslav TrofimovYaroslav Trofimov
7219
asked Nov 14 '18 at 13:32
Yaroslav TrofimovYaroslav Trofimov
7219
7219
1
I don't think it's possible to add adivinside anoptiontag. MDN quote: Permitted content: Text, possibly with escaped characters (like é)
– enxaneta
Nov 14 '18 at 13:35
@enxaneta, thank you. Any suggestions how can I overcome this?
– Yaroslav Trofimov
Nov 14 '18 at 13:39
Possible duplicate of Hide options in a select list using jQuery
– CodeBlaze
Nov 14 '18 at 13:48
I thought I can do it with pseudo elements but it doesn't work either. Please explain why do you need to hide text inside an option. Maybe there is a workaround.
– enxaneta
Nov 14 '18 at 13:51
add a comment |
1
I don't think it's possible to add adivinside anoptiontag. MDN quote: Permitted content: Text, possibly with escaped characters (like é)
– enxaneta
Nov 14 '18 at 13:35
@enxaneta, thank you. Any suggestions how can I overcome this?
– Yaroslav Trofimov
Nov 14 '18 at 13:39
Possible duplicate of Hide options in a select list using jQuery
– CodeBlaze
Nov 14 '18 at 13:48
I thought I can do it with pseudo elements but it doesn't work either. Please explain why do you need to hide text inside an option. Maybe there is a workaround.
– enxaneta
Nov 14 '18 at 13:51
1
1
I don't think it's possible to add a
div inside an option tag. MDN quote: Permitted content: Text, possibly with escaped characters (like é)– enxaneta
Nov 14 '18 at 13:35
I don't think it's possible to add a
div inside an option tag. MDN quote: Permitted content: Text, possibly with escaped characters (like é)– enxaneta
Nov 14 '18 at 13:35
@enxaneta, thank you. Any suggestions how can I overcome this?
– Yaroslav Trofimov
Nov 14 '18 at 13:39
@enxaneta, thank you. Any suggestions how can I overcome this?
– Yaroslav Trofimov
Nov 14 '18 at 13:39
Possible duplicate of Hide options in a select list using jQuery
– CodeBlaze
Nov 14 '18 at 13:48
Possible duplicate of Hide options in a select list using jQuery
– CodeBlaze
Nov 14 '18 at 13:48
I thought I can do it with pseudo elements but it doesn't work either. Please explain why do you need to hide text inside an option. Maybe there is a workaround.
– enxaneta
Nov 14 '18 at 13:51
I thought I can do it with pseudo elements but it doesn't work either. Please explain why do you need to hide text inside an option. Maybe there is a workaround.
– enxaneta
Nov 14 '18 at 13:51
add a comment |
3 Answers
3
active
oldest
votes
I think you can't do this.
<option> tag can't contain any other tags.
Try to use some libraries like Select2
answered Nov 14 '18 at 13:41
Konstantin KudelkoKonstantin Kudelko
1278
add a comment |
HTML tags are ignored inside option tag. w3
answered Nov 14 '18 at 13:42
Rogatnev NikitaRogatnev Nikita
10318
add a comment |
after rendering the view in web browser the select text not accept any div inside option tag it will assume as a text whatever you write in option tag
if you inspect you html you will see the what html part coming in view is like this
that's why your div property display none not working.
<select>
<option data-color="green"> Option 1
hiddenText
</option>
<option data-color="red"> Option 1
</option>
</select>
answered Nov 14 '18 at 13:42
Subhash ViswakarmaSubhash Viswakarma
792
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53301441%2fdisplay-none-does-not-work-inside-option-tag-in-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think you can't do this.
<option> tag can't contain any other tags.
Try to use some libraries like Select2
answered Nov 14 '18 at 13:41
Konstantin KudelkoKonstantin Kudelko
1278
add a comment |
I think you can't do this.
<option> tag can't contain any other tags.
Try to use some libraries like Select2
answered Nov 14 '18 at 13:41
Konstantin KudelkoKonstantin Kudelko
1278
add a comment |
I think you can't do this.
<option> tag can't contain any other tags.
Try to use some libraries like Select2
answered Nov 14 '18 at 13:41
Konstantin KudelkoKonstantin Kudelko
1278
I think you can't do this.
<option> tag can't contain any other tags.
Try to use some libraries like Select2
answered Nov 14 '18 at 13:41
Konstantin KudelkoKonstantin Kudelko
1278
answered Nov 14 '18 at 13:41
Konstantin KudelkoKonstantin Kudelko
1278
answered Nov 14 '18 at 13:41
Konstantin KudelkoKonstantin Kudelko
1278
answered Nov 14 '18 at 13:41
Konstantin KudelkoKonstantin Kudelko
1278
1278
add a comment |
add a comment |
HTML tags are ignored inside option tag. w3
answered Nov 14 '18 at 13:42
Rogatnev NikitaRogatnev Nikita
10318
add a comment |
HTML tags are ignored inside option tag. w3
answered Nov 14 '18 at 13:42
Rogatnev NikitaRogatnev Nikita
10318
add a comment |
HTML tags are ignored inside option tag. w3
answered Nov 14 '18 at 13:42
Rogatnev NikitaRogatnev Nikita
10318
HTML tags are ignored inside option tag. w3
answered Nov 14 '18 at 13:42
Rogatnev NikitaRogatnev Nikita
10318
answered Nov 14 '18 at 13:42
Rogatnev NikitaRogatnev Nikita
10318
answered Nov 14 '18 at 13:42
Rogatnev NikitaRogatnev Nikita
10318
answered Nov 14 '18 at 13:42
Rogatnev NikitaRogatnev Nikita
10318
10318
add a comment |
add a comment |
after rendering the view in web browser the select text not accept any div inside option tag it will assume as a text whatever you write in option tag
if you inspect you html you will see the what html part coming in view is like this
that's why your div property display none not working.
<select>
<option data-color="green"> Option 1
hiddenText
</option>
<option data-color="red"> Option 1
</option>
</select>
answered Nov 14 '18 at 13:42
Subhash ViswakarmaSubhash Viswakarma
792
add a comment |
after rendering the view in web browser the select text not accept any div inside option tag it will assume as a text whatever you write in option tag
if you inspect you html you will see the what html part coming in view is like this
that's why your div property display none not working.
<select>
<option data-color="green"> Option 1
hiddenText
</option>
<option data-color="red"> Option 1
</option>
</select>
answered Nov 14 '18 at 13:42
Subhash ViswakarmaSubhash Viswakarma
792
add a comment |
after rendering the view in web browser the select text not accept any div inside option tag it will assume as a text whatever you write in option tag
if you inspect you html you will see the what html part coming in view is like this
that's why your div property display none not working.
<select>
<option data-color="green"> Option 1
hiddenText
</option>
<option data-color="red"> Option 1
</option>
</select>
answered Nov 14 '18 at 13:42
Subhash ViswakarmaSubhash Viswakarma
792
after rendering the view in web browser the select text not accept any div inside option tag it will assume as a text whatever you write in option tag
if you inspect you html you will see the what html part coming in view is like this
that's why your div property display none not working.
<select>
<option data-color="green"> Option 1
hiddenText
</option>
<option data-color="red"> Option 1
</option>
</select>
answered Nov 14 '18 at 13:42
Subhash ViswakarmaSubhash Viswakarma
792
answered Nov 14 '18 at 13:42
Subhash ViswakarmaSubhash Viswakarma
792
answered Nov 14 '18 at 13:42
Subhash ViswakarmaSubhash Viswakarma
792
answered Nov 14 '18 at 13:42
Subhash ViswakarmaSubhash Viswakarma
792
792
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53301441%2fdisplay-none-does-not-work-inside-option-tag-in-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
I don't think it's possible to add a
divinside anoptiontag. MDN quote: Permitted content: Text, possibly with escaped characters (like é)– enxaneta
Nov 14 '18 at 13:35
@enxaneta, thank you. Any suggestions how can I overcome this?
– Yaroslav Trofimov
Nov 14 '18 at 13:39
Possible duplicate of Hide options in a select list using jQuery
– CodeBlaze
Nov 14 '18 at 13:48
I thought I can do it with pseudo elements but it doesn't work either. Please explain why do you need to hide text inside an option. Maybe there is a workaround.
– enxaneta
Nov 14 '18 at 13:51