"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"> <div class="row"> <div class="col-xs-12 col-md-6"> <select name="depts" id="rahmen" multiple="multiple"> <option value="00">ohne Angaben</option> <option value="01">S</option> <option value="02">M</option> <option value="03">L</option> <option value="04">XL</option> <option value="05">19 Zoll</option> <option value="06">21 Zoll</option> <option value="07">52 cm</option> <option value="08">61 cm</option> </select> </div> </div> <div class="row"> <div class="col-xs-12"> <button class="btn btn-default" type="submit">Suchen</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() { $('#rahmen').multiselect({ numberDisplayed: 1, includeSelectAllOption: true, allSelectedText: 'Alle ausgewählt', nonSelectedText: 'Keine ausgewählt', selectAllValue: 'alle', selectAllText: 'Alle wählen', unselectAllText: 'Auswahl aufheben', onSelectAll: function(checked) { var all = $('#rahmen ~ .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: