jQuery und multiselects

Von in javascript, jquery, netzthetik

Heute stand ich vor dem Problem, das Multiselect-Feld eines Formulars mit JavaScript beeinflussen zu müssen. Natürlich kam dabei mein Lieblings-Framework "jQuery" zum Einsatz. Einige aus der Hüfte geschossene Versuche schlugen jedoch fehl, weswegen ich mich in der jQuery-Dokumentation auf die Suche machte, um anschließend, ebenfalls erfolglos, das Internet zu durchkämmen. Letztendlich suchte ich mir aus unterschiedlichsten Beschreibungen das Passende zusammen. Falls jemand anders einmal nach der Lösung für folgendes Problem sucht, soll er hier fündig werden.

Namentlich geht es dabei um das Auslesen bzw. Auswählen einzelner Werte eines Multiselects. Bei einem einfachen Pulldown (oder Dropdown-Menü) ist dies recht einfach, weil man mit der Funktion val() auf den einzelnen ausgewählten Wert zugreifen kann:

$('#id').val();

wobei $('#id') den Selektor für das Pulldown darstellt. Probieren Sie es aus und verändern folgendes Pulldown. Ein JavaScript-Alert gibt Ihnen den zugehörigen Wert über die jQuery-Funktion val() aus:


Quelltext für diese Funktion:

<form action="">
    <select id="wetter_pulldown" name="wetter">
        <option value="1">sonnig</option>
        <option value="2">wolkig</option>
        <option value="3">regnerisch</option>
    </select>
</form>
<script type="test/javascript">
    $(document).ready(function(){
        $('#wetter_pulldown').change(function(){
            var pulldown_value = $('#wetter_pulldown').val();
            alert(pulldown_value);
        });
    });
</script>

Bei einem Multiselect ist das aber nicht so einfach, weil val() nur einzelne Werte ausgeben kann. Hierfür müssen die Werte in ein Array geschrieben werden. Glücklich darf sich schätzen, wer folgenden Code im Internet findet:

$("#id").val() || [];

Probieren Sie folgendes Multiselect aus. Wie üblich können mehrere Einträge durch wahlweises Drücken der Strg.- oder Shift-Taste ausgewählt werden. Klicken Sie anschließend auf den Button.


Quelltext für diese Funktion:

<form action="">
    <select id="wetter_multiselect_1" name="wetter" multiple="multiple">
        <option value="1">sonnig</option>        
        <option value="2">wolkig</option>        
        <option value="3">regnerisch</option>        
    </select>
    <input type="button" id="button_multiselect_1"
    name="button_multiselect_1" value="Ausgewählte Zeilen..." />
</form>
<script type="test/javascript">
    $(document).ready(function(){
        $('#button_multiselect_1').click(function(){
            var multiselect_values = $('#wetter_multiselect_1').val()||[];
            alert(multiselect_values);
        });
    });
</script>

Das Ergebnis in der Alert-Box muss mit Vorsicht betrachten werden. JavaScript wendet beim Alert auf ein Array einen Join an und präsentiert alle Werte in einem beistrich-separierten String. Mit typeof() oder .length kann man sich jedoch davon überzeugen, dass es sich tatsächlich um ein Array handelt.

Und jetzt besteht noch die Möglichkeit, Werte eines Multiselects über JavaScript zu selektieren. Bei meinem Problem ging es darum, die zuvor über val() || [] erfassten Werte wieder in das (in der Zwischenzeit manipulierte) Multiselect zurück zu übertragen. Selbstverständlich sind auch andere Anwendungen denkbar. In dieser Demo werden die Werte des ersten Multiselects auf das zweite Multiselect übertragen. Wählen Sie im ersten (obigen) Multiselect eine oder mehrere Zeilen aus und drücken Sie anschließend folgenden Button:


Quelltext für diese Funktion:

<form action="">
    <select id="wetter_multiselect_2" name="wetter" multiple="multiple">
        <option value="1">sonnig</option>        
        <option value="2">wolkig</option>        
        <option value="3">regnerisch</option>        
    </select>
    <input type="button" id="button_multiselect_2" name="button_multiselect_2"
    value="Ausgewählte Zeilen..." />
</form>
<script type="test/javascript">
    $(document).ready(function(){
        $('#button_multiselect_2').click(function(){
            var multiselect_values = $('#wetter_multiselect_1').val()||[];
            $('#wetter_multiselect_2').val(multiselect_values);
        });
    });
</script>

Diese Beispiele zeigen eindrucksvoll die Vorteile von jQuery auf. Eine Zeile genügt, um sich Daten eines Multiselects zu holen oder Daten an dasselbe zu übergeben.
Wenn man weiß, wie.

Share on LinkedInShare on Redditshare on TumblrShare on StumbleUponDigg thisShare on FacebookGoogle+Tweet about this on TwitterEmail to someone