"Test Multiselect"
Bootstrap 3.3.0 Snippet by SeeR

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> <form id="form"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12"> <select name="depts" id="example-getting-started" multiple="multiple"> <option value="05">Area, Ethnic, Cultural, Gender, And Group Studies</option> <option value="13">Education</option> <option value="03">Natural Resources And Conservation</option> <option value="40">Physical Sciences</option> <option value="14">Engineering</option> <option value="28">Military Science, Leadership And Operational Art</option> <option value="09">Communication, Journalism, And Related Programs</option> <option value="52">Business, Management, Marketing, And Related Support Services</option> <option value="50">Visual And Performing Arts</option> <option value="42">Psychology</option> <option value="11">Computer And Information Sciences And Support Services</option> <option value="45">Social Sciences</option> <option value="38">Philosophy And Religious Studies</option> <option value="30">Multi/Interdisciplinary Studies</option> <option value="44">Public Administration And Social Service Professions</option> <option value="51">Health Professions And Related Programs</option> <option value="27">Mathematics And Statistics</option> <option value="43">Homeland Security, Law Enforcement, Firefighting And Related Protective Services</option> <option value="04">Architecture And Related Services</option> <option value="16">Foreign Languages, Literatures, And Linguistics</option> <option value="22">Legal Professions And Studies</option> <option value="23">English Language And Literature/Letters</option> <option value="24">Liberal Arts And Sciences, General Studies And Humanities</option> <option value="54">History</option> <option value="26">Biological And Biomedical Sciences</option> <option value="00">Undefined</option> </select> </div> </div> <div class="row"> <div class="col-xs-12"> <button class="btn btn-default" type="submit">Form Data</button> </div> </div> </div> </form>
@import url("//cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"); body { padding: 10px; } .row{ margin-top: 15px; margin-bottom: 15px } .btn-group, .multiselect { width: 100%; } .multiselect { text-align: left; padding-right: 32px; overflow: hidden; text-overflow: ellipsis; } .multiselect .caret { right: 12px; top: 45%; position: absolute; } .multiselect-container.dropdown-menu { min-width: 0px; } .multiselect-container>li>a>label { white-space: normal; padding: 5px 15px 5px 35px; } .multiselect-container > li > a > label > input[type="checkbox"] { margin-top: 3px; } /* .multiselect-container>li>a>label { padding-right: 0; padding-left: 20px; } */
$(document).ready(function() { $('#example-getting-started').multiselect({ numberDisplayed: 1, includeSelectAllOption: true, allSelectedText: 'All Topics selected', nonSelectedText: 'No Topics selected', selectAllValue: 'all', selectAllText: 'Select all', unselectAllText: 'Unselect all', onSelectAll: function(checked) { var all = $('#example-getting-started ~ .btn-group .dropdown-menu .multiselect-all .checkbox'); all // get all child nodes including text and comment .contents() // iterate and filter out elements .filter(function() { // check node is text and non-empty return this.nodeType === 3 && this.textContent.trim().length; // replace it with new text }).replaceWith(checked ? this.unselectAllText : this.selectAllText); }, onChange: function() { debugger; var select = $(this.$select[0]); var dropdown = $(this.$ul[0]); var options = select.find('option').length; var selected = select.find('option:selected').length; var all = dropdown.find('.multiselect-all .checkbox'); all // get all child nodes including text and comment .contents() // iterate and filter out elements .filter(function() { // check node is text and non-empty return this.nodeType === 3 && this.textContent.trim().length; // replace it with new text }).replaceWith(options === selected ? this.options.unselectAllText : this.options.selectAllText); } }); $("#form").submit(function(e) { e.preventDefault(); alert($(this).serialize()); }); });

Related: See More


Questions / Comments: