|
FAQ de.comp.lang.javascript |
|
Bitte verwenden Sie als Einstiegsadresse in diese FAQ die
Homepage der Newsgroup de.comp.lang.javascript.
Der Aufenthaltsort dieser Seiten hier kann sich ohne Vorwarnung ändern.
Während auf die value-Eigenschaft eines Text-Inputs einfach über (z.B.) document.myForm.myText.value zugegriffen werden kann, muß man bei Radio- und Select-Objekten ein wenig mehr Aufwand treiben. Hier besitzt jede Auswahlmöglichkeit eine eigene Eigenschaft value, und man muß zunächst über die Eigenschaften checked (Radio-Objekt), selectedIndex oder selected (Select-Objekt) feststellen, welche Auswahl getroffen wurde.
Radio-Objekt
Das folgende Formular "myForm" besteht aus einem Radio-Objekt "myRadio" (bestehend aus drei Radio-Buttons) sowie einem Button zum Aufrufen der Auswertfunktion. Jeder der Radio-Buttons verfügt hier über eine eigene Eigenschaft value:
<form name="myForm"> <input type="radio" name="myRadio" value="wert1"> Text1 <input type="radio" name="myRadio" value="wert2"> Text2 <input type="radio" name="myRadio" value="wert3"> Text3 <input type="button" value="Test" onClick="alert(radioWert(document.myForm.myRadio));"> </form>
Durch Klicken auf den Button "Test", wird der Rückgabewert der Funktion radioWert() (diese steht im Header der Seite) in einer Alertbox angezeigt. Die Funktion geht solange die Elemente des übergebenen Radio-Objekts durch, bis sie auf eines stößt, dessen Eigenschaft checked gleich true ist - dessen Eigenschaft value gibt sie dann zurück. Ist kein Button ausgewählt, wird false zurückgegeben:
function radioWert(rObj) { for (var i=0; i<rObj.length; i++) if (rObj[i].checked) return rObj[i].value; return false; }
Select-Objekt mit Einfachauswahl
Das folgende Formular "myForm" besteht aus einem Select-Objekt "mySelect" (mit drei Optionen) sowie einem Button zum Aufrufen der Auswertfunktion. Jede Option verfügt hier über eine eigene Eigenschaft value:
<form name="myForm"> <select name="mySelect"> <option value="wert1">Text1 <option value="wert2">Text2 <option value="wert3">Text3 </select> <input type="button" value="Test" onClick="alert(selectWert(document.myForm.mySelect));"> </form>
Durch Klicken auf den Button "Test", wird der Rückgabewert der Funktion selectWert() (diese steht im Header der Seite) in einer Alertbox angezeigt. Die Funktion benutzt die Eigenschaft selectedIndex des übergebenen Select-Objekts, um die Eigenschaft value der ausgewählten Option zurückzugeben. Die Möglichkeit, keine Auswahl zu treffen, besteht hier nicht. Um Tipparbeit zu sparen, wird eine with-Anweisung benutzt:
function selectWert(sObj) { with (sObj) return options[selectedIndex].value; }
Select-Objekt mit Mehrfachauswahl
Das folgende Formular ist genauso aufgebaut wie das vorherige, mit dem Unterschied, daß das Select-Objekt hier mit dem Attribut multiple versehen ist. Dadurch kann der User auch mehrere Optionen (oder keine) aus der Liste auswählen (in der Regel geschieht das mit gedrückter Strg- bzw. Ctrl-Taste):
<form name="myForm"> <select name="mySelect" multiple size=3> <option value="wert1">Text1 <option value="wert2">Text2 <option value="wert3">Text3 </select> <input type="button" value="Test" onClick="alert(multipleWert(document.myForm.mySelect, '&'));"> </form>
Durch Klicken auf den Button "Test", wird der Rückgabewert der Funktion multipleWert() (diese steht im Header der Seite) in einer Alertbox angezeigt. Die Funktion benutzt die Eigenschaft selected jeder einzelnen Option des übergebenen Select-Objekts, um die value-Eigenschaften aller ausgewählten Optionen zu einem String zusammenzufügen und zurückzugeben. Der Inhalt des zweiten übergebenen Parameters wird als Trennzeichen (oder -string) benutzt. Wurde keine Option ausgewählt, wird ein Leerstring zurückgegeben:
function multipleWert(sObj, trenn) { var rVal = ''; for (var i=0; i<sObj.options.length; i++) with (sObj.options[i]) if (selected) rVal += trenn + value; return rVal.substring(trenn.length); }
Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/.
Dieser Text wurde erstellt von Dietmar H. G. Meier (©).
© S. Mintert, Ch. Kühnel
______ letzte Änderung: 01.01.2002 ______
Original-URL dieser Datei: http://dcljs.de/faq/antwort.php?Antwort=forms_radioselect