Dropdown mit Mehrfachauswahl und Ergebnisliste

Ich möchte eine Dropdown-Liste erstellen, wo Mehrfachauswahl möglich ist (am Besten in Form von Kontrollkästchen). Die dort getroffene Auswahl soll dann eine dahinterliegende Liste "filtern" und Ergebnisse anhand der Auswahl ausspucken. In meinem Fall, um es etwas plastischer zu machen, möchte ich eine Liste von Orten zur Verfügung stellen, aus welchen eine frei wählbare Menge ausgewählt werden kann (geil wär auch die Möglichkeit "alle" einfach und schnell auszuwählen).

Der hier verwendete Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://demos.codexworld.com/multi-select-dropdown-list-with-checkbox-jquery/jquery.multiselect.css"/> <style type="text/css"> ul,li { margin:0; padding:0; list-style:none;} .label { color:#000; font-size:16px;} </style> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="div-center"> <h2>jQuery MultiSelect Basic Uses</h2> <select name="langOpt[]" multiple id="langOpt"> <option value="C++">C++</option> <option value="C#">C#</option> <option value="Java">Java</option> <option value="Objective-C">Objective-C</option> <option value="JavaScript">JavaScript</option> <option value="Perl">Perl</option> <option value="PHP">PHP</option> <option value="Ruby on Rails">Ruby on Rails</option> <option value="Android">Android</option> <option value="iOS">iOS</option> <option value="HTML">HTML</option> <option value="XML">XML</option> </select> <h2>jQuery MultiSelect With Search Option</h2> <select name="langOpt2[]" multiple id="langOpt2"> <option value="C++">C++</option> <option value="C#">C#</option> <option value="Java">Java</option> <option value="Objective-C">Objective-C</option> <option value="JavaScript">JavaScript</option> <option value="Perl">Perl</option> <option value="PHP">PHP</option> <option value="Ruby on Rails">Ruby on Rails</option> <option value="Android">Android</option> <option value="iOS">iOS</option> <option value="HTML">HTML</option> <option value="XML">XML</option> </select> <h2>jQuery MultiSelect With Select All Option</h2> <select name="langOpt3[]" multiple id="langOpt3"> <option value="C++">C++</option> <option value="C#">C#</option> <option value="Java">Java</option> <option value="Objective-C">Objective-C</option> <option value="JavaScript">JavaScript</option> <option value="Perl">Perl</option> <option value="PHP">PHP</option> <option value="Ruby on Rails">Ruby on Rails</option> <option value="Android">Android</option> <option value="iOS">iOS</option> <option value="HTML">HTML</option> <option value="XML">XML</option> </select> <h2>jQuery MultiSelect With Optgroup</h2> <select name="langOptgroup[]" multiple id="langOptgroup"> <optgroup label="Programming Languages"> <option value="C++ / C#">C++ / C#</option> <option value="Java">Java</option> <option value="Objective-C">Objective-C</option> </optgroup> <optgroup label="Client-side scripting Languages"> <option value="JavaScript">JavaScript</option> </optgroup> <optgroup label="Server-side scripting Languages"> <option value="Perl">Perl</option> <option value="PHP">PHP</option> <option value="Ruby on Rails">Ruby on Rails</option> </optgroup> <optgroup label="Mobile Platforms"> <option value="Android">Android</option> <option value="iOS">iOS</option> </optgroup> <optgroup label="Document Markup Languages"> <option value="HTML">HTML</option> <option value="XML">XML</option> </optgroup> </select> </div> </div> </div> </div> <!-- JavaScript --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://demos.codexworld.com/includes/js/bootstrap.js"></script> <script src="https://demos.codexworld.com/multi-select-dropdown-list-with-checkbox-jquery/jquery.multiselect.js"></script> <script> $('#langOpt').multiselect({ columns: 1, placeholder: 'Select Languages' }); $('#langOpt2').multiselect({ columns: 1, placeholder: 'Select Languages', search: true }); $('#langOpt3').multiselect({ columns: 1, placeholder: 'Select Languages', search: true, selectAll: true }); $('#langOptgroup').multiselect({ columns: 4, placeholder: 'Select Languages', search: true, selectAll: true }); </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!