Select2 Ausgabe in einer input-group

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Sharkoon

Mitglied
Script ist im body Bereich.
Hier einmal das Script bzw der Quellcode des Browsers, dieser nimmt die Daten im dataset Attribut richtig an, aber Sie werden nicht in der Input Group gezeigt. Liegt aber evtl nicht dran das ich Select2 nutze?


HTML:
<select id="employee-suche" class="form-control select2-single" tabindex="-1" style="width: 550px;">
     <option></option>                                      
         <option class="form-control form-control-sm"
          data-username="Müller"
          data-email="müller@test.de"
          data-handy="4567894163"
          value="1"> // Ist die ID
          <i class="icon-arrow-up"></i>
        Müller,müller@test.de - 4567894163 // Wird im Dropdown Menü angezeigt
     </option>                              
</select>
 

Sempervivum

Erfahrenes Mitglied
Allerdings, mit Select2 funktioniert es nicht. Anscheinend feuert das Event nicht und man muss das Event nehmen, das Select2 zur Verfügung stellt. Dies funktioniert bei mir:
Code:
        $('#employee-suche').select2({
            placeholder: "Bitte auswählen ...",
            allowClear: true
        });
        // Das Event feuert wenn eine Option selektiert wurde:
        $('#employee-suche').on('select2:select', function (event) {
            const
                // selektierte Option bereit stellen:
                selected = $('#employee-suche').find(':selected'),
                // Werte für username, email und handy
                // aus den data-Attributen auslesen:
                username = selected.data('username'),
                email = selected.data('email'),
                handy = selected.data('handy');
            console.log(selected, event);
            // und in die Eingabefelder eintragen:
            $('input[name="username"]').val(username);
            $('input[name="email"]').val(email);
            $('input[name="handy"]').val(handy);
        });
 
Zuletzt bearbeitet:
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…