Select multiple per Input Feld bevölkern

  • Themenstarter Themenstarter ByeBye 8492
  • Beginndatum Beginndatum
B

ByeBye 8492

Moinsen,

ich will ein großes <select name="xyz" multiple"> Eingabefeld machen. Dies soll zum Start allerdings leer und durch eine kleine Input Box befüllt werden. Aber so, das man evtl. auch noch Datensätze editieren könnte ( die werden dann wieder in dem Inputfeld angezeigt). Wie kann man das machen, das Javascript ein Select Feld mit Optionen füllt, sobald diese per <Enter> in einem Textfeld bestätigt wurden?

Muffin
 
Hi,

mit new Option lassen sich neue Options-Objekte erstellen, die anschliessend in die
Select-Struktur eingehängt werden können. Diesen neuen Optionen kannst du den Wert aus
dem Textfeld zuweisen.

Soll ein Wert innerhalb der Select-Gruppe geändert werden, könntest du den gewählten Wert
in das Textfeld übernehmen und die Option löschen. Somit werden Doubletten verhindert, das
Editieren ist aber dennoch möglich.

Eine mögliche Konstruktion könnte wie folgt aussehen:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<meta name="author" content="Quaese" />
<script type="text/javascript">
<!--
function takeOver(objForm){
    // Neue Options-Instanz mit Wert aus Textfeld erstellen
    objOption = new Option(objForm.txtInput.value, objForm.txtInput.value, false, false);
    // Neue Option in Selectstruktur einhängen
    objForm.selDynamic.options[objForm.selDynamic.length] = objOption;
    // Textfeld leeren
    objForm.txtInput.value = "";
    // Fokus auf Textfeld setzen
    objForm.txtInput.focus();
}

function editOption(objForm){
    // Falls kein Wert in der Select-Gruppe ausgewählt wurde
    if(objForm.selDynamic.selectedIndex == -1)
        return;

    // Gewählten Wert in Textfeld schreiben
    objForm.txtInput.value = objForm.selDynamic.options[objForm.selDynamic.selectedIndex].text;
    // Wert aus Select-Gruppe löschen
    objForm.selDynamic.options[objForm.selDynamic.selectedIndex] = null;
}
-->
</script>
</head>
<body>
    <form action="" method="post">
        <div style="display: block; float: left; width: 180px;">
            <select style="width: 180px;" name="selDynamic" size="3">
                <option value="empty">- wählen -</option>
            </select>
        </div>
        <div><input type="button" onclick="editOption(this.form);" value="edit" /></div>
        <div style="clear: both; margin-top: 20px; padding-top: 10px; border-top: 1px solid #000000;">
            <input type="text" name="txtInput" />
            <input type="button" onclick="takeOver(this.form);" value="add" />
        </div>
    </form>
</body>
</html>
Ich hoffe, das hilft dir weiter.

Ciao
Quaese
 
mmh, das klappt leider gar nicht :(.
Sollte vielleicht die Polls doch nur mit 10 Optionen machen und nicht mit unendlich vielen ^^
 
Hi,

was genau klappt denn nicht?

Bei mir lassen sich über das Input-Feld Werte der Select-Gruppe zufügen. Gewählte Optionen
lassen sich nach Drücken des add-Buttons im Textfeld editieren.

Hab' ich dein Problem vielleicht falsch verstanden?

Ciao
Quaese
 
Quaese hat gesagt.:
Hi,

was genau klappt denn nicht?

Bei mir lassen sich über das Input-Feld Werte der Select-Gruppe zufügen. Gewählte Optionen
lassen sich nach Drücken des add-Buttons im Textfeld editieren.

Hab' ich dein Problem vielleicht falsch verstanden?

Ciao
Quaese
Zum Vergrößern anklicken....
thx, hatte JavaScript ausgehabt :ugly:, und ohne das kann es schlecht klappen ^^
Sowas hatte ich auch schon geschrieben, hatte denn nur das Problem beim editieren, das er die Ursprungsid nicht mehr beibehalten hat ( wichtig um die später wieder in die Datenbank zuschreiben).
 
Hi,

nun bin ich etwas verwirrt, da du anfangs von einer leeren Selectbox ausgegangen bist, die erst
mit Werten befüllt werden sollte. Jetzt sollen aber Ur-IDs beibehalten werden.

Vorstellbar wären Selectboxen, die beim Aufruf der Seite mit Daten aus einer Datenbank gefüllt
werden. Dabei würde jedem Datenbank-Attribut eine Selectgruppe zugeordnet werden (ID, Name,
Zuname usw.).
Anschliessend könnten diese Datensätze editiert werden bzw. neue Datensätze hinzugefügt werden.

Folgender Code realisiert oben beschriebenes Vorgehen. Bestehende IDs werden beibehalten,
neuen Datensätzen wird der Einfachkeit halber eine dreistellige ID zugewiesen. Hier sind sicherlich
elegantere Lösungen möglich.
HTML: 
<!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>
Vielleicht trifft es das, was du suchst.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück