JS: SELECT2, Selectboxen mit und ohne JavaScript

edit | delete

Autor: Ralf v.d.Mark, Varsamis Karamanidis (Macky), Milindi Lwanga-Buchholz

eingetragen: Dienstag, 27. November 2012 um 15:01 Uhr (48/2012 Kalenderwoche)

geändert: Montag, 19. August 2024 um 13:34 Uhr (34/2024 Kalenderwoche)

Keywords: JavaScript auswahlbox option optgroup

Kategorien: JavaScript, PHP, JS-jQuery,

Text:

Baut eine sehr gut zu bedienende SelectBox mit JavaScript zusammen.
In dem Quellcode-Bespiel sind zwei Versionen aufgeführt:


UPDATE, 16.08.2024: siehe neue Version, bei der die Selectboxen durch den Klassennamen (class="select2boxClass") gefunden werden.


Mit einer Beispiel-Selectbox lieg das fertige Programm in "select2_vorlageScripte.zip"

Quellcode:   

Neue Version vom 16.08.2024: 
   Die Selectboxen werden mit Klassennamen (class="select2boxClass") gefunden.

Erstmal folgendes einbinden:
<script type="text/javascript" src="jquery.min.js"></script>
<link href="select2/select2.css" rel="stylesheet"/>
<script type="text/javascript" src="select2/select2.js"></script>
<link href="select2/select2BoxExtraStyle.css" rel="stylesheet"/>

<script>
/**
 * Mit Hilfe von jQuery werden alle Elemente mit class="select2boxClass"
 * in eine Select2-Box umgewandelt.
 *
 * @example
 *     <select name="vorlageProjektId"
 *             id="vorlageProjektId"
 *             data-select2-placeholder="Bitte wählen Sie eine Vorlage aus ..."
 *             data-select2-allowclear="true"
 *             className="select2boxClass select2">
 *         <option value="" selected="selected">Sortierung nach RMS-Key</option>
 *         <optgroup label="Bestehende RMS-Projekte">
 *             <option value="3">3 - AA</option>
 *             <option value="6">6 - BB</option>
 *         </optgroup>
 *     </select>
 */
$(document).ready(function () {
    $('.select2boxClass').each(
        function (index, element) {
            const selectElement = $(element);
            const placeholder = selectElement.data('select2-placeholder');

            if (placeholder) {
                selectElement.prepend('<option></option>');//für placeholder!
            }
            selectElement.select2({
                placeholder: placeholder,
                allowClear: selectElement.data('select2-allowclear')
            });
            //console.log(selectElement.data('select2-placeholder'));
            //console.log(selectElement.data('select2-allowclear'));
        }
    )
});
</script>

<select id="staatenArr"
        name="staatenArr[]"
        class="select2boxClass" 
        multiple="multiple"
        data-select2-placeholder="Auswahl mehrerer Bundesstaaten ..." 
        data-select2-allowclear="true"" 
        style="width: 100%;" 
        required="required">
            <optgroup label="Alaskan/Hawaiian Time Zone">
                <option value="AK">Alaska</option>
                <option value="HI" selected="selected">Hawaii</option>
            </optgroup>
</select>