Hallo zusammen,
Ein Formular, welches aus mehreren Select-Elementen besteht, soll dynamisch bestückt werden.
Die Werte des ersten Selects habe ich vorgegeben, die weiteren sollen aus einer Datenbank geladen werden, abhängig von der vorherigen Auswahl.
Hier ein paar Beispiele:
Der Bereich mit Ajax funktioniert gut, das Return liefert ein json-objekt.
Hier mein Ansatz für das JS:
Ein Formular, welches aus mehreren Select-Elementen besteht, soll dynamisch bestückt werden.
Die Werte des ersten Selects habe ich vorgegeben, die weiteren sollen aus einer Datenbank geladen werden, abhängig von der vorherigen Auswahl.
Hier ein paar Beispiele:
- Fall 1:
- Select 1: Mann
- Select 2:
- Option 1: Peter
- Option 2: Paul
- Fall 2:
- Select 1: Frau
- Select 2:
- Option 1: Franziska
- Option 2: Christina
Der Bereich mit Ajax funktioniert gut, das Return liefert ein json-objekt.
Hier mein Ansatz für das JS:
Code:
$( ".typsel" ).bind("change", function() { $( ".typsel [value='']" ).remove(); var data = { 'action': 'fhw_ladeMarke', 'typ': this.value }; jQuery.post(ajax_object.ajax_url, data, function(response) { $(".typanzeige").html(response); }); $sel = $( ".markesel" ); $sel.append( "<option>"+value+"</option>" ); }); $( ".markesel" ).bind("click", function() { var text = $(".typanzeige").text(); if(text != "") { $sel = $( ".markesel" ); $.each( text, function( index, value ) { $sel.append ( "<option value='"+value+"'>"+value+"</option>" ); }); } });
Kommentar