jQuery und multiselects

Von in javascript, jquery, netzthetik

Heu­te stand ich vor dem Pro­blem, das Multiselect-​Feld eines For­mu­lars mit Java­Script beein­flus­sen zu müs­sen. Natür­lich kam dabei mein Lieblings-​Framework “jQue­ry” zum Ein­satz. Eini­ge aus der Hüf­te geschos­se­ne Ver­su­che schlu­gen jedoch fehl, wes­we­gen ich mich in der jQuery-​Dokumentation auf die Suche mach­te, um anschlie­ßend, eben­falls erfolg­los, das Inter­net zu durch­käm­men. Letzt­end­lich such­te ich mir aus unter­schied­lichs­ten Beschrei­bun­gen das Pas­sen­de zusam­men. Falls jemand anders ein­mal nach der Lösung für fol­gen­des Pro­blem sucht, soll er hier fün­dig werden.

Nament­lich geht es dabei um das Aus­le­sen bzw. Aus­wäh­len ein­zel­ner Wer­te eines Mul­ti­selects. Bei einem ein­fa­chen Pull­down (oder Dropdown-​Menü) ist dies recht ein­fach, weil man mit der Funk­ti­on val() auf den ein­zel­nen aus­ge­wähl­ten Wert zugrei­fen kann:

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

wobei $(‘#id’) den Selek­tor für das Pull­down dar­stellt. Pro­bie­ren Sie es aus und ver­än­dern fol­gen­des Pull­down. Ein JavaScript-​Alert gibt Ihnen den zuge­hö­ri­gen Wert über die jQuery-​Funktion val() aus:


Quell­text für die­se 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 Mul­ti­select ist das aber nicht so ein­fach, weil val() nur ein­zel­ne Wer­te aus­ge­ben kann. Hier­für müs­sen die Wer­te in ein Array geschrie­ben wer­den. Glück­lich darf sich schät­zen, wer fol­gen­den Code im Inter­net findet:

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

Pro­bie­ren Sie fol­gen­des Mul­ti­select aus. Wie üblich kön­nen meh­re­re Ein­trä­ge durch wahl­wei­ses Drü­cken der Strg.- oder Shift-​Taste aus­ge­wählt wer­den. Kli­cken Sie anschlie­ßend auf den Button.


Quell­text für die­se 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 Ergeb­nis in der Alert-​Box muss mit Vor­sicht betrach­ten wer­den. Java­Script wen­det beim Alert auf ein Array einen Join an und prä­sen­tiert alle Wer­te in einem beistrich-​separierten String. Mit typeof() oder .length kann man sich jedoch davon über­zeu­gen, dass es sich tat­säch­lich um ein Array handelt.

Und jetzt besteht noch die Mög­lich­keit, Wer­te eines Mul­ti­selects über Java­Script zu selek­tie­ren. Bei mei­nem Pro­blem ging es dar­um, die zuvor über val() || [] erfass­ten Wer­te wie­der in das (in der Zwi­schen­zeit mani­pu­lier­te) Mul­ti­select zurück zu über­tra­gen. Selbst­ver­ständ­lich sind auch ande­re Anwen­dun­gen denk­bar. In die­ser Demo wer­den die Wer­te des ers­ten Mul­ti­selects auf das zwei­te Mul­ti­select über­tra­gen. Wäh­len Sie im ers­ten (obi­gen) Mul­ti­select eine oder meh­re­re Zei­len aus und drü­cken Sie anschlie­ßend fol­gen­den Button:


Quell­text für die­se 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>

Die­se Bei­spie­le zei­gen ein­drucks­voll die Vor­tei­le von jQue­ry auf. Eine Zei­le genügt, um sich Daten eines Mul­ti­selects zu holen oder Daten an das­sel­be 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