Jquery Chosen hides empty optgroup
0
I have a multi select list, where first optgroup is empty (does not have child options) by default chosen hides this group, but i still want to show it. is there a method to force chosen to not hide it? Refer to image we can see option group with label Main is not in the list.
$('.chosen-control').chosen({ width: 400 });<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
</head>
<body>
<select multiple class="chosen-control">
<optgroup label="Main"></optgroup>
<optgroup label="Group A">
<option>Option A1</option>
<option>Option A2</option>
<option>Option A3</option>
</optgroup>
<optgroup label="Group B">
<option>Option B1</option>
<option>Option B2</option>
<option>Option B3</option>
</optgroup>
<optgroup label="Group C">
<option>Option C1</option>
<option>Option C2</option>
</optgroup>
</select>
</body>
</html>html css jquery-chosen
asked Nov 14 '18 at 16:43
TauhaTauha
227
add a comment |
0
I have a multi select list, where first optgroup is empty (does not have child options) by default chosen hides this group, but i still want to show it. is there a method to force chosen to not hide it? Refer to image we can see option group with label Main is not in the list.
$('.chosen-control').chosen({ width: 400 });<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
</head>
<body>
<select multiple class="chosen-control">
<optgroup label="Main"></optgroup>
<optgroup label="Group A">
<option>Option A1</option>
<option>Option A2</option>
<option>Option A3</option>
</optgroup>
<optgroup label="Group B">
<option>Option B1</option>
<option>Option B2</option>
<option>Option B3</option>
</optgroup>
<optgroup label="Group C">
<option>Option C1</option>
<option>Option C2</option>
</optgroup>
</select>
</body>
</html>html css jquery-chosen
asked Nov 14 '18 at 16:43
TauhaTauha
227
Welcome. Your question would get better / higher quality answers if you would include an Minimal, Complete, and Verifiable example.
– cale_b
Nov 14 '18 at 16:53
Take a look at the following -> github.com/harvesthq/chosen/issues/2020#issuecomment-223768441; may still apply even though it is old thread
– Morpheus
Nov 14 '18 at 16:57
@Morpheus i have been reviewed that post that did not help, also i updated the question
– Tauha
Nov 14 '18 at 17:27
@cale_b i added the example, and thanks for suggesting me
– Tauha
Nov 14 '18 at 17:27
add a comment |
0
0
0
I have a multi select list, where first optgroup is empty (does not have child options) by default chosen hides this group, but i still want to show it. is there a method to force chosen to not hide it? Refer to image we can see option group with label Main is not in the list.
$('.chosen-control').chosen({ width: 400 });<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
</head>
<body>
<select multiple class="chosen-control">
<optgroup label="Main"></optgroup>
<optgroup label="Group A">
<option>Option A1</option>
<option>Option A2</option>
<option>Option A3</option>
</optgroup>
<optgroup label="Group B">
<option>Option B1</option>
<option>Option B2</option>
<option>Option B3</option>
</optgroup>
<optgroup label="Group C">
<option>Option C1</option>
<option>Option C2</option>
</optgroup>
</select>
</body>
</html>html css jquery-chosen
asked Nov 14 '18 at 16:43
TauhaTauha
227
I have a multi select list, where first optgroup is empty (does not have child options) by default chosen hides this group, but i still want to show it. is there a method to force chosen to not hide it? Refer to image we can see option group with label Main is not in the list.
$('.chosen-control').chosen({ width: 400 });<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
</head>
<body>
<select multiple class="chosen-control">
<optgroup label="Main"></optgroup>
<optgroup label="Group A">
<option>Option A1</option>
<option>Option A2</option>
<option>Option A3</option>
</optgroup>
<optgroup label="Group B">
<option>Option B1</option>
<option>Option B2</option>
<option>Option B3</option>
</optgroup>
<optgroup label="Group C">
<option>Option C1</option>
<option>Option C2</option>
</optgroup>
</select>
</body>
</html>$('.chosen-control').chosen({ width: 400 });<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
</head>
<body>
<select multiple class="chosen-control">
<optgroup label="Main"></optgroup>
<optgroup label="Group A">
<option>Option A1</option>
<option>Option A2</option>
<option>Option A3</option>
</optgroup>
<optgroup label="Group B">
<option>Option B1</option>
<option>Option B2</option>
<option>Option B3</option>
</optgroup>
<optgroup label="Group C">
<option>Option C1</option>
<option>Option C2</option>
</optgroup>
</select>
</body>
</html>$('.chosen-control').chosen({ width: 400 });<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
</head>
<body>
<select multiple class="chosen-control">
<optgroup label="Main"></optgroup>
<optgroup label="Group A">
<option>Option A1</option>
<option>Option A2</option>
<option>Option A3</option>
</optgroup>
<optgroup label="Group B">
<option>Option B1</option>
<option>Option B2</option>
<option>Option B3</option>
</optgroup>
<optgroup label="Group C">
<option>Option C1</option>
<option>Option C2</option>
</optgroup>
</select>
</body>
</html>html css jquery-chosen
html css jquery-chosen
asked Nov 14 '18 at 16:43
TauhaTauha
227
asked Nov 14 '18 at 16:43
TauhaTauha
227
edited Nov 14 '18 at 17:25
Tauha
asked Nov 14 '18 at 16:43
TauhaTauha
227
asked Nov 14 '18 at 16:43
TauhaTauha
227
asked Nov 14 '18 at 16:43
TauhaTauha
227
227
Welcome. Your question would get better / higher quality answers if you would include an Minimal, Complete, and Verifiable example.
– cale_b
Nov 14 '18 at 16:53
Take a look at the following -> github.com/harvesthq/chosen/issues/2020#issuecomment-223768441; may still apply even though it is old thread
– Morpheus
Nov 14 '18 at 16:57
@Morpheus i have been reviewed that post that did not help, also i updated the question
– Tauha
Nov 14 '18 at 17:27
@cale_b i added the example, and thanks for suggesting me
– Tauha
Nov 14 '18 at 17:27
add a comment |
Welcome. Your question would get better / higher quality answers if you would include an Minimal, Complete, and Verifiable example.
– cale_b
Nov 14 '18 at 16:53
Take a look at the following -> github.com/harvesthq/chosen/issues/2020#issuecomment-223768441; may still apply even though it is old thread
– Morpheus
Nov 14 '18 at 16:57
@Morpheus i have been reviewed that post that did not help, also i updated the question
– Tauha
Nov 14 '18 at 17:27
@cale_b i added the example, and thanks for suggesting me
– Tauha
Nov 14 '18 at 17:27
Welcome. Your question would get better / higher quality answers if you would include an Minimal, Complete, and Verifiable example.
– cale_b
Nov 14 '18 at 16:53
Welcome. Your question would get better / higher quality answers if you would include an Minimal, Complete, and Verifiable example.
– cale_b
Nov 14 '18 at 16:53
Take a look at the following -> github.com/harvesthq/chosen/issues/2020#issuecomment-223768441; may still apply even though it is old thread
– Morpheus
Nov 14 '18 at 16:57
Take a look at the following -> github.com/harvesthq/chosen/issues/2020#issuecomment-223768441; may still apply even though it is old thread
– Morpheus
Nov 14 '18 at 16:57
@Morpheus i have been reviewed that post that did not help, also i updated the question
– Tauha
Nov 14 '18 at 17:27
@Morpheus i have been reviewed that post that did not help, also i updated the question
– Tauha
Nov 14 '18 at 17:27
@cale_b i added the example, and thanks for suggesting me
– Tauha
Nov 14 '18 at 17:27
@cale_b i added the example, and thanks for suggesting me
– Tauha
Nov 14 '18 at 17:27
add a comment |
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f53305013%2fjquery-chosen-hides-empty-optgroup%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53305013%2fjquery-chosen-hides-empty-optgroup%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
Welcome. Your question would get better / higher quality answers if you would include an Minimal, Complete, and Verifiable example.
– cale_b
Nov 14 '18 at 16:53
Take a look at the following -> github.com/harvesthq/chosen/issues/2020#issuecomment-223768441; may still apply even though it is old thread
– Morpheus
Nov 14 '18 at 16:57
@Morpheus i have been reviewed that post that did not help, also i updated the question
– Tauha
Nov 14 '18 at 17:27
@cale_b i added the example, and thanks for suggesting me
– Tauha
Nov 14 '18 at 17:27