Bootstrap Multiselect Skeleton
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<!-- <select id="contentTypesFilter" class="multiselect" multiple="multiple">
<option value="1:5" data-servicetypeid="5">Apple Music - Student</option>
<option value="8:5" data-servicetypeid="5">Apple Music - Individual Monthly</option>
<option value="9:5" data-servicetypeid="5">Apple Music - Family Monthly</option>
<option value="0:5" data-servicetypeid="5">Apple Music - Trial</option>
<option value="3:5" data-servicetypeid="5">Apple Music - Carrier Trial 1</option>
<option value="4:5" data-servicetypeid="5">Apple Music - Carrier Trial 2</option>
<option value="6:6" data-servicetypeid="5">Music Subscription - Match 2</option>
<option value="21:5" data-servicetypeid="5">Apple Music - Carrier Paid</option>
<option value="31:5" data-servicetypeid="5">Apple Music - Carrier Trial 3</option>
<option value="61:5" data-servicetypeid="5">Apple Music - Individual Annual</option>
<option value="62:5" data-servicetypeid="5">Apple Music - Lyrics</option>
</select> -->
<select id="contentTypesFilter" class="multiselect" multiple="multiple">
<option value="83:6" data-servicetypeid="6" data-parentcontentgrpid="83">Beats 1</option>
<option value="121:5" data-servicetypeid="5" data-parentcontentgrpid="281">Apple Music - Student</option>
<option value="3:1" data-servicetypeid="1" data-parentcontentgrpid="3">Music</option>
<option value="5:1" data-servicetypeid="1" data-parentcontentgrpid="5">Ringtone</option>
<option value="22:1"...
JavaScript
$(function() {
$('.multiselect').multiselect({
//includeSelectAllOption: true,
//selectAllText: 'All Selected',
//selectAllValue: -1,
numberDisplayed: 1,
maxHeight: 500,
onInitialized: function(select, container) {
},
onChange: function(options, checked) {
if (options.text().indexOf("Apple Music") >= 0) {
var values = [];
var music = [];
$('#contentTypesFilter option').each(function() {
if ($(this).text().indexOf("Apple Music") >= 0) {
music.push($(this).val());
}
});
if(checked) {
$('#contentTypesFilter').multiselect('select', music);
} else {
$('#contentTypesFilter').multiselect('deselect', music);
}
}
}
});
});