Dropdown Box 2 abhängig von Dropdown Box 1

[Tolwin]

Hallo Forum,

habe jetzt schon mal in google und div. Foren gesucht,
aber nicht´s passendes gefunden. Wahrscheinlich ist es auch
keine große Sache. Ich habe sein Startdatum das auf 3 Dropdowns
besteht (Tag, Monat, Jahr). Daneben steht das Enddatum mit den gleichen Feldern. Wenn das Startdatum verändert wird, soll
automatisch ohne die Seite neu zu laden das Enddatum angepasst werden. Kann mir jemand sagen wie das gehen könnte?

Vielen Dank schon im Voraus
Tolwin

[lina-]

moin Tolwin :)

Kann mir jemand sagen wie das gehen könnte?

Auch wenn ich mir gleich wieder Haue von den "javascript-ist-boese-Leuten" einhandel mein Tipp:
der OnChange-Eventhandler

wenn checkbox1 geändert wird, wird der Event gefeuert und eine Methode, die die Anpassung von checkbox2 vornimmt kann aufgerufen werden ... eigentlich tatsächlich keine große Sache.

liebe Grüße aus Berlin
lina-

[Tolwin]

Hallo Lina

der OnChange-Eventhandler

mir ist nicht ganz klar wie ich mit onchange den Wert einer Dropdownbox ändern kann. Hättest Du vielleicht ein Beispiel für mich?

Viele Grüße
Tolwin

[lina-]

moin Tolwin :)

mir ist nicht ganz klar wie ich mit onchange den Wert einer Dropdownbox ändern kann. Hättest Du vielleicht ein Beispiel für mich?

Der HTML-Bereich mit zwei Dropdown-Boxen (id=zahlen und id=gliederung)

<form>
<p>
<select id="zahlen" size="1" onChange="updateDropDown()"
<option selected>0</option>
<option>1</option>
<option>2</option>
</select>

<select id="gliederung" size="1">
<option selected>0.0</option>
<option>0.1</option>
<option>0.2</option>
</select>
</p>
</form>

Der Scriptbereich, in dem bei einer Änderung der ersten Checkbox die zweite angepasst wird. (Dies ist ein relativ simples Beispiel in dem einfach nur der selectedIndex verwendet wird... aber das kannst du ja dann nach Belieben anpassen)

<script type="text/javascript">
function updateDropDown(){
  var selected=document.getElementById("zahlen").options.selectedIndex;
  var optionsArrayGliederung=document.getElementById("gliederung").options;
  for(var i=0;i<=optionsArrayGliederung.length-1;i++){
    optionsArrayGliederung[i].text=selected+"."+i;
  }
}
</script>

liebe Grüße aus Berlin
lina-

[Struppi]

habe jetzt schon mal in google und div. Foren gesucht,
aber nicht´s passendes gefunden. Wahrscheinlich ist es auch
keine große Sache. Ich habe sein Startdatum das auf 3 Dropdowns
besteht (Tag, Monat, Jahr). Daneben steht das Enddatum mit den gleichen Feldern. Wenn das Startdatum verändert wird, soll
automatisch ohne die Seite neu zu laden das Enddatum angepasst werden. Kann mir jemand sagen wie das gehen könnte?

Dazu musst du dir erstmal aus dem ersten drei Selectboxen ein Date() Objekt zusammen basteln. Und dann aus diesem Datum dein enddatum berechnen um damit dir drei Felder entsprechend zu ändern.

In etwa so:

Du rufst die Funktion so auf:
<select name="tag_1" onchange="setDatum(this.form)">
...

Die Funktion sieht so aus~~~javascript

<script type="text/javascript">
function setDatum(form)
{
var tage = 5;
var tag = form.tag_1.options[form.tag_1.selectedIndex].value;
var monat = form.monat_1.options[form.monat_1.selectedIndex].value;
var jahr = form.jahr_1.options[form.jahr_1.selectedIndex].value;
var datum = new Date( jahr, monat - 1, tag, 0, 0, 0);

var end_datum = new Date();
end_datum.setTime( datum.getTime() + tage * ( 24 * 60 * 60 * 1000) )

form.tag_2.selectedIndex = end_datum.getDate() - 1;
form.monat_2.selectedIndex = end_datum.getMonth();
form.jahr_2.selectedIndex = end_datum.getFullYear() - jahr;
}
</script>

  
Das ganze ist aber noch komplizierter, da du ja so auch den 31.2. auswählen kannst, den es aber nicht gibt.  
  
Und, es gibt hier übrigens kein JS Hasser.  
  
Struppi.

-- 
[Javascript ist toll](http://javascript.jstruebig.de/)