Abhängige Selects mit JS

Mal wieder muss ich gaaanz tief in die JS-Trickkiste greifen 🙂 Ich benötigt abhängige Select-Boxen. Das heißt, die Auswahl der ersten Box beeinflusst die Möglichkeiten in der zweiten. Was kommt einen da am ehesten in den Sinn: JS.

Ohne jQuery

http://www.malleus.de/FAQ/createDependentSelectOptions3.html

Einfach und übersichtlich. Zumindest bei den kleinen Datenmengen. Leider passt das nicht zu meinem CMS-Konzept. Der Controller übergibt die Daten an ein HTML-Element, sie werden bei diesem Beispiel aber schon im Header benötigt.

Mit jQuery

http://www.appelsiini.net/projects/chained

Weil ich sowieso jQuery ständig mit mir herum schleppe, habe ich auch hier mal gesucht und eigentlich nur umstädndliche Lösungen erwartet. Das hier aber ist mindestens so sauber wie das oben. Und es passt zu meinem Code 🙂

Das ganze basiert auf Klassen und kann bei Bedarf auch per AJAX seine abhängigen Daten laden und das abhängige Select erstellen. Passt.

Formularfelder mit jQuery hinzufügen

Die Frage, die schon 1000 mal gestellt und beantwortet wurde 😀 Ich kann kein JS und musste selbst suchen und probieren bis es einigermaßen geklappt hat. Ausschlaggebend war das folgende, einfache und kleine Script.

http://jsfiddle.net/fkvBt/

Zur Anwendung in einem Bootstrap-Formular musste ich es etwas modifizieren. Hier sind ein paar mehr DIVs im Spiel.

<div class=“input form-group“>
<label for=“einheit“>Einheit <span class=“number“>1</span></label>
<div class=“row“>
<div class=“col-sm-8″>
<input type=“text“ class=“form-control“ id=“einheit“ name=“einheit[]“>
</div>
<div class=“col-sm-3″>
<input type=“text“ class=“form-control“ id=“einheit“ name=“text[]“>
</div>
<div class=“col-sm-1″>
<input type=“text“ class=“form-control“ id=“einheit“ name=“text[]“>
</div>
</div>
</div>

Im Script muss nun der Name des input-Divs angepasst werden, ich habe da noch form-group integriert, und beim onclick zum entfernen funktioniert parent() nicht, also suche ich mit closest()

<script language=“JavaScript“>
$(function(){
$(‚#add‘).on(‚click‘,function(){
var fields = $(‚#form‘).find(‚.input.form-group‘).length+1;
var html ='<div class=“input form-group“><label for=“einheit“>Einheit <span class=“number“>’+fields+'</span></label><div class=“row“><div class=“col-sm-7″><input type=“text“ class=“form-control“ id=“einheit“ name=“einheit[]“></div><div class=“col-sm-3″><input type=“text“ class=“form-control“ id=“einheit“ name=“qm[]“></div><div class=“col-sm-1″><a class=“btn btn-default“ id=“remove“ role=“button“>-</a></div></div></div>‘;
$(„#add“).before(html)
})

$(‚#form‘).on(‚click‘,’#remove‘,function(){
$(this).closest(‚.input.form-group‘).remove();
$(‚#form‘).find(‚.input.form-group‘).each(function(i){
$(this).find(‚.number‘).text(i+1);
})
})
})
</script>