Neue Elemente in Auswahlliste aus DB einfügen

smyle

Erfahrenes Mitglied
Hallo, ich habe eine Frage zum auslesen von Daten mit JavaScript.

und zwar habe ich eine selectbox erstellt,
HTML:
 <select name="spezies" style="visibility:hidden;">            </select>
mit folgendem JavaScript Code,
Code:
  var species = document.Search.species.value;
  document.Search.spezies.style.visibility="visible"

  Eintrag = new Option(species, false, true);
  document.Search.spezies.options[document.Search.spezies.length] = Eintrag;

Nun möchte ich jedoch in der Zeile der Optionen ( Eintrag = new Option(species, weitere aus DB ,false, true)) weitere Optionen aus der DB haben.
Wie kann ich das machen?

Meine SQL abfrage würde so aussehen:
PHP:
 $SQL = "SELECT `Spezies` FROM `spezies` ORDER BY spezies ASC";
 $query= mysql_query($SQL);

Kann mir da bitte jemand helfen?
Ich bin total ratlos und kenne mich mit JavaScript fast nicht aus.
 
Nun gut

erstmal musst du deine Werte aus der Datenbank irgendwie in ein brauchbares Format umwandeln.
z.B. Wert1;Wert2;Wert3, XML oder mithilfe von fertigen Bibliotheken wie JSON

Diese "präparierten" Werte empfängst du per Ajax in deinem Script und trennst sie wieder entsprechend (anhand der smikolons, oder wie auch immer) und stopfst sie in ein Array.

Das Array läufst du mir ner for schleife durch und fügst in der schleife immer neue "options" hinzu

kurzes bsp:
Code:
var select = document.getElementById("IdDesElements"); // ich persönlich würde eher über die ID arbeiten
for (int i = 0; i < eintraege.length; i++) { //Im Array Einträge stehen deine Werte, z.B zweidimensional eintraege[i][0] = value; eintraege[i][1] = text;
    var option = document.createElement("option");
    option.text = eintraege[i]1;
    option.value = eintraege[i]0;
    select.options.add(option);
}

hab das jetzt nicht ausprobiert, aber müsste eigentlich funktionieren

MfG
 
Danke, deine Lösung sieht eigentlich sehr gut aus, aber ich kann dein Code nicht umsetzten :( . Deswegen habe ich es nun anders gemacht.

Code:
<script type="text/javascript">
  var species = document.Search.species.value;
 Eintrag1 = new Option(species, false, true);
 document.Search.spezies.options[document.Search.spezies.length] = Eintrag1;
 document.Search.species.style.visibility="hidden";
 document.Search.spezies.style.visibility="visible"
</script >

HTML:
<input type="text" name="species"  disabled="disabled" value="" style="width:100%; visibility:visible;"/>
<select name="spezies" style="visibility:hidden;width:100%;">
PHP:
				 $SQL = "SELECT `Spezies` FROM `spezies` ORDER BY spezies ASC";
 					$query= mysql_query($SQL);
						


					 while($row = mysql_fetch_object($query))
					{
						
					        $row = $row->Spezies;					
			 				 echo "<option>";
							 echo "$row ";
							 echo "</option>";
					
					}
HTML:
</select>

Das funktioniert auch.
ABER... Im IE wird die var species nicht als selektiert angegeben.
Das heiss es ist nicht der ertse wert der angezeigt wird. Im FI jedoch schaut es korrekt aus. Denn der erste wert der in der seletbox angezeigt wird ist der aus der var species.

Kann mir jemand sagen weswegen dies im IE nicht funktioniert?
 
So wie ich das sehe habe ich deine Frage sowieso missinterpretiert. Du arbeitest nicht mit AJAX, sondern gibst direkt deine options aus.

Es wäre toll, wenn du sagen würdest was konkret dein Ziel ist, bzw. was das JavaScript Script machen soll, ich habe leider keine Ahnung auf was du hinaus willst.

MfG
 
Sorry ich versuch nochmal zu erklären was ich genau machen möchte.

Also ich habe eine DB mit der Tabelle spezies. In dieser Tabelle sind über 200 Daten erfasst worden.

Nun habe ich eine Select box erstellt und ein Textfeld.
Im Textfeld wird aus der oben genannten Tabelle einen bestimmten Datensatz ausgelesen und angezeigt. Nun kommt JS ins Spiel. Mit meine JS Code lese ich den Inhalt des Textfeldes aus und schreibe diesen als aller ersten werd in der Selcetbox ein.
Jedoch kann man in der Selectbox nicht nur den ausgelesen Datensatz wählen, sondern auch die restlichen Daten aus der Tabelle spezies.

Und nun wie ich schon erwähnt habe, im Firefox funktioniert meine Variante, aber im IE nicht :(
Warum ist das so?

Oder gibt es eine andere einfache Möglichkeit um das zu machen?

Gruss smyle
 
Hmm, ok, verstehe den Anwendungszweck zwar immer noch nicht so ganz, aber ich hoffe ich habe das Problem jetzt richtig interpretiert.

So wie ich das verstehe, fügst du dir einfach eine neue option ein, und willst diese automatisch selektieren?
dazu solltest du dann einfach noch
Javascript:
document.Search.spezies.selectedIndex = document.Search.spezies.length;

hinzufügen.

Ansonsten wüsste ich nicht, was nicht funktionieren soll

//edit
Ah, ok, ich glaub ich hab gefunden was das problem ist - Tomaten auf den Augen :D
Option erwartet 4 Parameter, wobei die letzten 3 davon optional sind. Der letzte, also 4. parameter setzt es selcted oder nicht, demnach musst du dein new Option erweiter zu:
Javascript:
Eintrag1 = new Option(species, species, false, true);

MfG
 
Zuletzt bearbeitet:
Zurück