nicht angemeldet
Verkettete Auswahllisten
möchte eine auswahl machen wie im folgenden Beispiel jedoch
möchte ich die Daten aus meiner SQL Datenbank, könnt Ihr mir sagen wie ich dies tue, hab es mit folgendem Code Versucht jedoch ohne erfolg.
http://aktuell.de.selfhtml.org/artikel/javascript/verkettete-auswahllisten/
Wie passe ich das "terminAuswahl.js" an?
<?php
start.php
//Einstellungen (localhost von mySql, Benutzername, Passwort,
// Datanbank, Tabelle(n) in der Datenbank)
$host = "localhost";
$user = "root";
$pw = "pass";
$database = "work";
$table = "bundesland";
$table1 = "schule";
//Verbindung mit mysql herstellen; das "@"-Zeichen dient dabei zur Fehlerausgabeunterdrueckung bei mySql-Fehlern
//mit dem "die"-Befehl wird im Fehlerfalle eine eigene Fehlermeldung ausgegeben
$db=@mysql_connect("$host","$user","$pw") or die("Konnte keine Verbindung mit dem Datenbankserver aufbauen");
//eine bestimme Datenbank "aktivieren" (auswaehlen)
@mysql_select_db("$database",$db);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Beispiel 1</title>
<script type="text/javascript" src="terminAuswahl.js"></script>
<script type="text/javascript" src="LinkedSelection.js"></script>
<script type="text/javascript">
/**
* Diese Callback-Funktion soll beim Abschliessen der Auswahlstrecke und beim
* ndern der Auswahl in einer der Auswahllisten aufgerufen werden.
* @param selected ein Array mit den Daten der jeweiligen Auswahllisten
* (leer, wenn Strecke nicht abgeschlossen)
**/
function ergebnisZeigen( selected )
{
if( selected.length )
{
/*
* Auswahlstrecke wurde beendet
*/
// Visualisierung der Auswahlstrecke
var sel = '';
var val = '';
var txt = '';
for( var i = 0; i < selected.length; i++ )
{
sel += ( i>0 ? ' → ' : '') + selected[i].id;
val += ( i>0 ? ' → ' : '') + selected[i].value;
txt += ( i>0 ? ' → ' : '') + selected[i].text;
}
var output = '<h3>Gewählte Strecke:<'+'/h3><h4>IDs der Auswahllisten<'+'/h4><p>' + sel +
'<'+'/p><h4>Werte der gewählten Optionen<'+'/h4><p>' + val +
'<'+'/p><h4>Texte (Namen) der gewählten Optionen<'+'/h4><p>' + txt + '<'+'/p>';
}
else
{
/*
* Auswahlstrecke wurde noch nicht beendet
*/
// Hinweis zur Auswahl in der nächsten Auswahlliste
var output = '<p>Wählen Sie eine Option aus der nächsten Auswahlliste.<'+'/p>';
}
var ergebnisObj = document.
ElementById( 'ergebnis' ).innerHTML = output;
};
window.onload = function()
{
var vk = new LinkedSelection( [ 'bundesland', 'schule', 'ha' ], ergebnisZeigen, terminAuswahl );
}
</script>
</head>
<body>
<h1>Beispiel 1</h1>
<p>Bitte wählen Sie in der folgenden Auswahlliste einen Professor</p>
<p>
<label id="Bundeslandlable" for="bundesland">Bundesland:</label>
<select name="bundesland">
<?php
$i=0;
$result=@mysql_query("SELECT id,bundesland FROM $table") or die ("Fehler bei Suchabfrage");
while($row = mysql_fetch_array($result))
{
$i++;
echo "<option value=$i>  $row[bundesland]\n  ";
}
?>
</select>
<label id="lesungLabel" for="lesung">Lesung:</label>
<select id="lesung">
<option value="--">------</option>
</select>
<label id="lesungTermin" for="termin">Termin:</label>
<select id="termin">
<option value="--">------</option>
</select>
</p>
<div id="ergebnis"></div>
</body>
</html>
vielen Dank
Norbert
-
Hi,
sowas kannst du über AJAX machen... dazu musst in die ersten zwei <select> einen onchange handler reintun, der die eine Anfrage an die Datenbank macht. Dazu musst du einen XMLHttpRequest aufmachen, der die Daten der Liste an den server sendet.
Der gibt dir dann eine Liste für die nächste Selectbox zurück, die du dann in der Callback füllen musst.
Wie das genau geht, und wie dann die die Callback Funktion aufgerufen wird, da findest du genug im Netz. stichwort: AJAX, XmlHttpRequest, ...
Gruß
Christian -
Hallo,
möchte eine auswahl machen wie im folgenden Beispiel jedoch
möchte ich die Daten aus meiner SQL Datenbank, könnt Ihr mir sagen wie ich dies tue, hab es mit folgendem Code Versucht jedoch ohne erfolg.http://aktuell.de.selfhtml.org/artikel/javascript/verkettete-auswahllisten/
Wie passe ich das "terminAuswahl.js" an?
Das sollte hier kommlet weg:
<script type="text/javascript" src="terminAuswahl.js"></script>
<script type="text/javascript" src="LinkedSelection.js"></script>
<script type="text/javascript">// und hier solltest du mit PHP die entsprechenden Daten generieren. Mal so als Beispiel:
var schulenAuswahl {
'bundeslaender' : {
'id1' : ['id1', 'Bayern'],
'id2' : ['id2', 'Sachsen'],
'id3' : ['id3', 'Berlin']
},
'schulen' : {
'id1' : [
['sch1', 'Name Schule 1'],
['sch1', 'Name Schule 2'],
],
'id2' : [
['sch3', 'Name Schule 3'],
['sch4', 'Name Schule 4'],
]
}
};function ergebnisZeigen( selected ){
window.onload = function()
{
var vk = new LinkedSelection( [ 'bundeslaender', 'schulen'], ergebnisZeigen, schulenAuswahl );
}</script>
Grüße
Thomas