<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<?php
// Datenarray simulieren
$arrData = array();
$arrData[0] = array("id"=>121, "name"=>"peter", "zuname"=>"meyer");
$arrData[1] = array("id"=>122, "name"=>"hans", "zuname"=>"schmidt");
$arrData[2] = array("id"=>123, "name"=>"guenther", "zuname"=>"langenstein");
$arrData[3] = array("id"=>124, "name"=>"werner", "zuname"=>"schorr");
?>
<meta name="author" content="Quaese" />
<script type="text/javascript">
<!--
// Namen der Selectboxen
var arrGroup = new Array("selID", "selName", "selZuname");
var intOldIndex = -1; // Ausgangs-Index merken
var strOldID = "none"; // Ur-ID merken
var strOldName = "none"; // Vornamen merken
var strOldZuname = "none"; // Zunamen merken
/* **************************************************** *
* Funktion zum Ändern aller Selectboxen *
* Parameter: objForm - Objekt des Formulares *
* intIndex - Index der ausgewählten Option *
* **************************************************** */
function changeGroup(objForm, intIndex){
// Alle Selectboxen durchlaufen
for(var i=0; i<arrGroup.length; i++){
// Alle Optionen auf den gleichen gewählten Index einstellen
objForm.elements[arrGroup[i]].selectedIndex = intIndex;
}
}
/* ************************************************************************************* *
* Funktion zur Übergabe der Daten aus den Selectboxen an die Textfelder zum Editieren *
* Parameter: objForm - Objekt des Formulares *
* ************************************************************************************* */
function editOption(objForm){
// Falls kein Wert in der Select-Gruppe ausgewählt wurde
if(objForm.elements[arrGroup[0]].selectedIndex == -1)
return;
// Index der Option merken, die editiert werden soll
intOldIndex = objForm.elements[arrGroup[0]].selectedIndex;
// ID der Option merken, die editiert werden soll
strOldID = objForm.elements[arrGroup[0]].options[objForm.elements[arrGroup[0]].selectedIndex].value;
// Name der Option merken, die editiert werden soll
strOldName = objForm.elements[arrGroup[1]].options[objForm.elements[arrGroup[1]].selectedIndex].value;
// Zuname der Option merken, die editiert werden soll
strOldZuname = objForm.elements[arrGroup[2]].options[objForm.elements[arrGroup[2]].selectedIndex].value;
// Gewählten Namen in Textfeld schreiben
objForm.txtName.value = strOldName;
// Gewählten Zunamen in Textfeld schreiben
objForm.txtZuname.value = strOldZuname;
}
/* ************************************************************************************* *
* Funktion zur Übernahme der Daten aus den Textfeldern bzw. zum Abbruch des Editierens *
* Parameter: objForm - Objekt des Formulares *
* boolCancel - 0 = Daten übernehmen, 1 = Editieren abbrechen *
* ************************************************************************************* */
function takeOver(objForm, boolCancel){
// Falls Daten geändert werden sollen
if(boolCancel == 0){
// Falls ein neuer Datensatz erzeugt werden soll
if(intOldIndex == -1){
// Dreistellige ID generieren
var varID = Math.floor(Math.random()*1000);
// Neue Options-Instanz mit ID erstellen
objOption = new Option(varID, varID, false, false);
// Neue Option in Selectstruktur einhängen
objForm.elements[arrGroup[0]].options[objForm.elements[arrGroup[0]].length] = objOption;
// Neue Options-Instanz mit Name erstellen
objOption = new Option(objForm.txtName.value, objForm.txtName.value, false, false);
// Neue Option in Selectstruktur einhängen
objForm.elements[arrGroup[1]].options[objForm.elements[arrGroup[1]].length] = objOption;
// Neue Options-Instanz mit Zuname erstellen
objOption = new Option(objForm.txtZuname.value, objForm.txtZuname.value, false, false);
// Neue Option in Selectstruktur einhängen
objForm.elements[arrGroup[2]].options[objForm.elements[arrGroup[2]].length] = objOption;
}else{
// Ausgangs-ID schreiben
objForm.elements[arrGroup[0]].options[intOldIndex].value = strOldID;
objForm.elements[arrGroup[0]].options[intOldIndex].text = strOldID;
// Editierten Namen schreiben
objForm.elements[arrGroup[1]].options[intOldIndex].value = objForm.txtName.value;
objForm.elements[arrGroup[1]].options[intOldIndex].text = objForm.txtName.value;
// Editierten Zunamen schreiben
objForm.elements[arrGroup[2]].options[intOldIndex].value = objForm.txtZuname.value;
objForm.elements[arrGroup[2]].options[intOldIndex].text = objForm.txtZuname.value;
}
}else{
// Falls Editieren abgebrochen werden soll
if(intOldIndex != -1){
// Gespeicherte Daten löschen
intOldIndex = -1;
strOldID = "none";
strOldName = "none";
strOldZuname = "none";
}
}
// Verstecktes Feld zurücksetzen
intOldIndex = -1;
// Textfelder leeren
objForm.txtName.value = "";
objForm.txtZuname.value = "";
// Fokus auf Textfeld setzen
objForm.txtName.focus();
}
// -->
</script>
</head>
<body>
<form action="" method="post">
<div style="float: left; width: 300px;">
<?php
echo("<select onchange=\"changeGroup(this.form, this.selectedIndex);\" style=\"\" name=\"selID\" size=\"1\">\n");
foreach($arrData as $key){
echo("\t<option value=\"".$key['id']."\">".$key['id']."</option>\n");
}
echo("</select>\n");
echo("<select onchange=\"changeGroup(this.form, this.selectedIndex);\" style=\"\" name=\"selName\" size=\"1\">\n");
foreach($arrData as $key){
echo("\t<option value=\"".$key['name']."\">".$key['name']."</option>\n");
}
echo("</select>\n");
echo("<select onchange=\"changeGroup(this.form, this.selectedIndex);\" style=\"\" name=\"selZuname\" size=\"1\">\n");
foreach($arrData as $key){
echo("\t<option value=\"".$key['zuname']."\">".$key['zuname']."</option>\n");
}
echo("</select>\n");
?>
</div>
<div>
<input type="button" onclick="editOption(this.form);" value="edit" />
<input type="button" onclick="takeOver(this.form, 1);" value="cancel" />
</div>
<div style="clear: both; margin-top: 20px; padding-top: 10px; border-top: 1px solid #000000;">
<input type="text" name="txtName" />
<input type="text" name="txtZuname" />
<input type="button" onclick="takeOver(this.form, 0);" value="add" />
</div>
</form>
</body>
</html>
.
