OPTIONS begrenzen mit onChange im Select Feld

[BigDundee]

Hallo...

folgendes Problem:

Ich habe zwei SELECT Felder:

<FORM ACTION="<?=$_SERVER["PHP_SELF"];?>">
<TABLE>
  <TR>
    <TD>Antragsteller:  </TD>
    <TD>
      
      <SELECT NAME="manuelleBerechnungAS" METHOD="GET">
        <OPTION VALUE="60">60&nbsp;&euro;</OPTION>
        <OPTION VALUE="80">80&nbsp;&euro;</OPTION>
        <OPTION VALUE="100">100&nbsp;&euro;</OPTION>
        <OPTION VALUE="120">120&nbsp;&euro;</OPTION>
        <OPTION VALUE="140">140&nbsp;&euro;</OPTION>
        <OPTION VALUE="160">160&nbsp;&euro;</OPTION>
        <OPTION VALUE="180">180&nbsp;&euro;</OPTION>
        <OPTION VALUE="200">200&nbsp;&euro;</OPTION>
        <OPTION VALUE="220">220&nbsp;&euro;</OPTION>
        <OPTION VALUE="240">240&nbsp;&euro;</OPTION>
        <OPTION VALUE="260">260&nbsp;&euro;</OPTION>
        <OPTION VALUE="280">280&nbsp;&euro;</OPTION>
        <OPTION VALUE="300">300&nbsp;&euro;</OPTION>
        <OPTION VALUE="320">320&nbsp;&euro;</OPTION>
      </SELECT>
    
    </TD>
  </TR>
  <TR>
    <TD>Berechnungsjahr: </TD>
    <TD>
      <SELECT NAME="Jahr" onChange="blubb(this.value)">
        <OPTION VALUE="2005">2005&nbsp;</OPTION>
        <OPTION VALUE="2006">2006&nbsp;</OPTION>
        <OPTION VALUE="2007">2007&nbsp;</OPTION>
        <OPTION VALUE="2008">2008&nbsp;</OPTION>
      </SELECT>
    </TD>
  </TR>
  <TR>
    <TD COLSPAN="2">
      <INPUT TYPE="submit" VALUE="test">
    </TD>
  </TR>
</TABLE>

Ich würde nun gerne nach Auswahl im unteren SELECT Feld (Berechnungsjahr) die letzten x-Werte (Jahr abhängig) im oberen SELECT Feld nicht anzeigen lassen.

Also, wenn zB als Jahr 2005 gewählt wird soll die obere SELECT Box nur bis 200 gehen, bei 2006 bis 240 etc..

Ich wäre für einen Denkansatz dankbar.


MfG [BD]

 

[Quaese]

Hi,

du könntest ein assoziatives Array erstellen, dessen Schlüssel die Jahrezahlen sind. Als Werte
werden ihnen jeweils die letzten Indizes der Preise der ersten Select-Gruppe zugeordnet, die noch
angezeigt werden sollen.

Weiterhin erstellst du ein Array, mit dessen Hilfe die erste Select-Gruppe aufgebaut werden kann.
Da hier Text und Value sich eigentlich nicht unterscheiden, reicht ein eindimensionales Array aus.

Wird ein Jahr gewählt, wird die erste Select-Gruppe zunächst gelöscht. Anschliessend wird sie
bis zum Index, der an der Stelle des übergebenen Jahres gefunden wird, wieder aufgebaut.

Beispiel:

// Index des letzten Index, der in der ersten Select-Gruppe angezeigt werden soll
// (Zählbeginn bei Null)
var arrIndex = new Array();
arrIndex["2005"] = 7;  // Index des letzten gültigen Preises für 2005
arrIndex["2006"] = 9;  // Index des letzten gültigen Preises für 2006
arrIndex["2007"] = 11; // Index des letzten gültigen Preises für 2007
arrIndex["2008"] = 13; // Index des letzten gültigen Preises für 2008

var arrFirstSelect = new Array();  // Array für Euro-Preise
var intAnzahl = 14;                // Anzahl der Preise
var intStart = 60;                 // Startpreis

// Select-Gruppen-Array für Preise (falls in 20-Euro-Schritten erhöht wird)
for(i=0; i<intAnzahl; i++){
  arrFirstSelect[i] = intStart;
  intStart += 20;
}

function updateSelect(strValue){
  // Alle Optionen in Preis-Gruppe löschen
  document.forms[0].manuelleBerechnungAS.length = 0;
  // Preise bis zum gewählten Index durchlaufen
  for(i=0; i<=arrIndex[strValue]; i++){
    // Neue Option erstellen und in Select-Gruppe einfügen
    objOption = new Option(arrFirstSelect[i]+" €", arrFirstSelect[i], false, false);
    document.forms[0].manuelleBerechnungAS.options[document.forms[0].manuelleBerechnungAS.length] = objOption;
  }
}

Im Script wird davon ausgegangen, dass es sich beim Formular mit den Select-Gruppen um das
erste im Dokument handelt.

Im HTML-Dokument würde ich die erste Select-Gruppe nur bis zum letzten Preis für 2005 anlegen.

<TABLE>
  <TR>
    <TD>Antragsteller:  </TD>
    <TD>
      <SELECT NAME="manuelleBerechnungAS" METHOD="GET">
        <OPTION VALUE="60">60&nbsp;&euro;</OPTION>
        <OPTION VALUE="80">80&nbsp;&euro;</OPTION>
        <OPTION VALUE="100">100&nbsp;&euro;</OPTION>
        <OPTION VALUE="120">120&nbsp;&euro;</OPTION>
        <OPTION VALUE="140">140&nbsp;&euro;</OPTION>
        <OPTION VALUE="160">160&nbsp;&euro;</OPTION>
        <OPTION VALUE="180">180&nbsp;&euro;</OPTION>
        <OPTION VALUE="200">200&nbsp;&euro;</OPTION>
      </SELECT>
    </TD>
  </TR>
  <TR>
    <TD>Berechnungsjahr: </TD>
    <TD>
      <SELECT NAME="Jahr" onChange="updateSelect(this.value)">
        <OPTION VALUE="2005">2005&nbsp;</OPTION>
        <OPTION VALUE="2006">2006&nbsp;</OPTION>
        <OPTION VALUE="2007">2007&nbsp;</OPTION>
        <OPTION VALUE="2008">2008&nbsp;</OPTION>
      </SELECT>
    </TD>
  </TR>
  <TR>
    <TD COLSPAN="2">
      <INPUT TYPE="submit" VALUE="test">
    </TD>
  </TR>
</TABLE>

Ciao
Quaese

 

[BigDundee]

Danke sehr, werde ich ausprobieren....