Der folgende jQuery Codeschnipsel behandelt Auswahllisten in einem Formular.
Wenn man zum Beispiel in der ersten Auswahlliste einen Eintrag auswählt und in der zweiten Auswahlliste eine Alternative auswählen kann (zum Beispiel als Ersatz, wenn der erste Eintrag nicht verfügbar ist), dann sollte der in der ersten Liste ausgewählte Eintrag nicht mehr in der zweiten Liste auftauchen.
Wechselt man in der ersten Liste aber den Eintrag, muss die zweite Liste wieder angepasst werden. Dieser Codeschnipsel macht genau das ohne die Seite neu laden zu müssen. Das ist gut für die Benutzerfreundlichkeit und erspart Rückfragen, da die übersendeten Daten eindeutig sind.
Hier in dem Script nehme ich als Beispiel einmal Autos, welche man über ein Formular in einer bestimmten Farbe bestellen kann.
Script variable Auswahllisten:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script> jQuery(document).ready(function() { jQuery('#model1').click(function(){ model1_choosed = (jQuery('#auswahlfeld1').val()); //Auslesen des Eintrags aus Auswahleld1 if(model1_choosed == 'Mercedes rot') { jQuery("#auswahlfeld2").empty(); //Auswahlfeld2 leeren jQuery("").val("--keine andere Farbe").text("--keine andere Farbe").prependTo("#auswahlfeld2"); jQuery("").val("Mercedes blau").text("Mercedes blau").appendTo("#auswahlfeld2"); jQuery("").val("Mercedes gelb").text("Mercedes gelb").appendTo("#auswahlfeld2"); } if(model1_choosed == 'Mercedes blau') { jQuery("#auswahlfeld2").empty(); //Auswahlfeld2 leeren jQuery("").val("--keine andere Farbe").text("--keine andere Farbe").prependTo("#auswahlfeld2"); jQuery("").val("Mercedes rot").text("Mercedes rot").appendTo("#auswahlfeld2"); jQuery("").val("Mercedes gelb").text("Mercedes gelb").appendTo("#auswahlfeld2"); } if(model1_choosed == 'Mercedes gelb') { jQuery("#auswahlfeld2").empty(); //Auswahlfeld2 leeren jQuery("").val("--keine andere Farbe").text("--keine andere Farbe").prependTo("#auswahlfeld2"); jQuery("").val("Mercedes rot").text("Mercedes rot").appendTo("#auswahlfeld2"); jQuery("").val("Mercedes blau").text("Mercedes blau").appendTo("#auswahlfeld2"); } }); }); </script> |
Und hier das Beispiel für die Auswahlliste:
oder alternativ:
