Archiv-Modus von Basti1012 Lösungspage

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).
Code

                                    
                                <!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul,li { margin:0; padding:0; list-style:none;}
.label { color:#000; font-size:16px;}

.ms-options-wrap,
.ms-options-wrap * {
    box-sizing: border-box;
}

.ms-options-wrap > button:focus,
.ms-options-wrap > button {
    position: relative;
    width: 100%;
    text-align: left;
    border: 1px solid #aaa;
    background-color: #fff;
    padding: 5px 20px 5px 5px;
    margin-top: 1px;
    font-size: 13px;
    color: #aaa;
    outline: none;
    white-space: nowrap;
}

.ms-options-wrap > button:after {
    content: ' ';
    height: 0;
    position: absolute;
    top: 50%;
    right: 5px;
    width: 0;
    border: 6px solid rgba(0, 0, 0, 0);
    border-top-color: #999;
    margin-top: -3px;
}

.ms-options-wrap > .ms-options {
    position: absolute;
    left: 0;
    width: 100%;
    margin-top: 1px;
    margin-bottom: 20px;
    background: white;
    z-index: 2000;
    border: 1px solid #aaa;
	text-align:left;
}

.ms-options-wrap > .ms-options > .ms-search input {
    width: 100%;
    padding: 4px 5px;
    border: none;
    border-bottom: 1px groove;
    outline: none;
}

.ms-options-wrap > .ms-options .ms-selectall {
    display: inline-block;
    font-size: .9em;
    text-transform: lowercase;
    text-decoration: none;
}
.ms-options-wrap > .ms-options .ms-selectall:hover {
    text-decoration: underline;
}

.ms-options-wrap > .ms-options > .ms-selectall.global {
    margin: 4px 5px;
}

.ms-options-wrap > .ms-options > ul > li.optgroup {
    padding: 5px;
}
.ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {
    border-top: 1px solid #aaa;
}

.ms-options-wrap > .ms-options > ul > li.optgroup .label {
    display: block;
    padding: 5px 0 0 0;
    font-weight: bold;
}

.ms-options-wrap > .ms-options > ul label {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 8px 4px;
    margin: 1px 0;
}

.ms-options-wrap > .ms-options > ul li.selected label,
.ms-options-wrap > .ms-options > ul label:hover {
    background-color: #efefef;
}

.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
    margin-right: 5px;
    position: absolute;
    left: 4px;
    top: 7px;
}

</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>

		<script src="/js_webseite/jquery.js"></script>
     	        <script src="/js_webseite/bootstrap.min.js"></script>
    	<script src="/js_webseite/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>
basti1012.bplaced.net

Dropdown mit Mehrfachauswahl und Ergebnisliste

Code
