I'm using jQuery multiselect, that can be found here: http://loudev.com/#home
I want to hide the options of an optgroup when clicked. I have fooled around with this in the jsfiddle, but I can't hide an option if it has been added back to the opgroup. Also, once an option is selected is still shows if an optgroup is hidden. Is there a way to achieve hidden optgroup options?
HTML:
<body>
<select id="optgroup" multiple="multiple">
<optgroup label="OptOne">
<option value="elem1">Elem 1</option>
<option value="elem2">Elem 2</option>
<option value="elem3">Elem 3</option>
</optgroup>
<optgroup label="OptTwo">
<option value="elem4">Elem 4</option>
<option value="elem5">Elem 5</option>
</optgroup>
<optgroup label="OptThree">
<option value="elem6">Elem 6</option>
<option value="elem7">Elem 7</option>
</optgroup>
</select>
</body>
JS:
$('#optgroup').multiSelect({
selectableOptgroup: false,
afterSelect: function (values, text) {
_self = this;
// if there are more than 6 elements selected
if (this.$element.val().length > 4) {
// disable all selectable elements
var selectables = this.$container.find('.ms-elem-selectable');
selectables.addClass(_self.options.disabledClass);
// disable all <option>
var options = _self.$element.find('option');
options.prop('disabled', true);
}
},
afterDeselect: function (values, text) {
_self = this;
// if there are less than 6 elements selected
if (this.$element.val() && this.$element.val().length < 4) {
// enable all selectable elements
var selectables = this.$container.find('.ms-elem-selectable');
selectables.removeClass(_self.options.disabledClass);
// enable all <option>
var options = _self.$element.find('option');
options.prop('disabled', false);
}
}
});
$("body").on('click', '.ms-optgroup-label', function () {
$(this).siblings().toggle();
})
CSS:
.ms-container{
background: transparent url('../img/switch.png') no-repeat 50% 50%;
width: 76.5vh;
}
.ms-container:after{
content: ".";
display: block;
height: 0;
line-height: 0;
font-size: 0;
clear: both;
min-height: 0;
visibility: hidden;
}
.ms-container .ms-selectable, .ms-container .ms-selection{
background: #fff;
color: #555555;
float: left;
width: 45%;
}
.ms-container .ms-selection{
float: right;
}
.ms-container .ms-list{
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
height: 30vh;
padding: 0;
overflow-y: auto;
}
.ms-container .ms-list.ms-focus{
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
}
.ms-container ul{
margin: 0;
list-style-type: none;
padding: 0;
}
.ms-container .ms-optgroup-container{
width: 100%;
}
.ms-container .ms-optgroup-label{
margin: 0;
padding: 5px 0px 0px 5px;
color: #3a6f91;
font-weight: 700;
}
.ms-container .ms-selectable li.ms-elem-selectable,
.ms-container .ms-selection li.ms-elem-selection{
border-bottom: 1px #eee solid;
padding: 2px 10px;
color: #555;
font-size: 14px;
}
.ms-container .ms-selectable li.ms-hover,
.ms-container .ms-selection li.ms-hover{
cursor: pointer;
color: #fff;
text-decoration: none;
background-color: #08c;
}
.ms-container .ms-selectable li.disabled,
.ms-container .ms-selection li.disabled{
background-color: #eee;
color: #aaa;
cursor: text;
}