PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [HTML/CSS/JS] Wie kann ich ein Javascript-Array mit MySQL-Daten belegen?


ElDani
16.04.2010, 11:13
Hallo, Ihrs, :)

ich arbeite gerade an einer Tauschbörse, dabei sollen Leute selbst Angebote erstellen können, wobei Sie in <Select>-Feldern eine Rubrik und eine zugehörige Unterrubrik auswählen können sollen.. nun hab ich schon einen CodeSchnippsel gefunden, der die Übergabe von der ersten Select-Box zur zweiten Select-Box realisiert. allerdings ist das ein Beispiel-Array und ich weiß noch nicht, wie ich das mit den Daten aus der MySQL-Abfrage belegen kann.
Kann mir das bitte einer von euch basteln? (Falls nötig würde ich für den fertigen Schnippsel auch gern ein bissel was spenden.. :)

Hier die bisher vorhandenen CodeSchnippsel:

Der JavaScript-Code aus dem Beispiel:


<!--SELECT dynamisch belegen-->
<script type="text/javascript">
/*
var valuesSec = new Array(
new Array("--"),
new Array("a", "b", "c"),
new Array("1", "2", "3", "4"),
new Array("x", "y", "z")
);
*/

var valuesSec = new Array(
new Array("--"),
new Array(new Array("a", "value a"), new Array("b", "value b"), new Array("c", "value c")),
new Array(new Array("1", "value 1"), new Array("2", "value 2"), new Array("3", "value 3"), new Array("4", "value 4")),
new Array(new Array("x", "value x"), new Array("y", "value y"), new Array("z", "value z"))
);

function setSecondary() {
nPos = document.myForm.firstSel.selectedIndex;
nOldLength = document.myForm.secondSel.length;
nNewLength = valuesSec[nPos].length;
for(i=0; i<nNewLength; i++) {
document.myForm.secondSel.options[i] = new Option(valuesSec[nPos][i][1]);
document.myForm.secondSel.options[i].value = valuesSec[nPos][i][0];
if (i==0) document.myForm.secondSel.selectedIndex = 0;
}
for(i=nOldLength; i>nNewLength; ) document.myForm.secondSel.options[--i] = null;
}
</script>


Der html-Code zur Ausgabe der Select-Felder:


<div align="center">
<form id="myForm" name="myForm" action="" method="POST">
<select id="firstSel" name="firstSel" onChange="setSecondary();">
<option>--</option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<select id="secondSel" name="secondSel">
<option>--</option>
</select>
<input type="submit" value="Ab die Post">
</form>
</div>


hier als Beispiel aus dem Seiten-Menü die funktionierende Anzeige (alles in einem Select-Feld, aber korrekt geordnet),(Dank an Lokutos ;) :


<select name="rubrik">
<option value="" <? if ($_POST['rubrik'] == "0") echo 'selected';?>>Bitte wähle:</option>
<?php
$uhol = mysql_query("SELECT * FROM rubriken WHERE rubrik_parent_id = '0' ORDER BY rubrik_bezeichnung");
while ($anzeige = mysql_fetch_array($uhol)) {
?>
<option value="<?php echo $anzeige['rubrik_id'];?>" <? if ($_POST['rubrik'] == $anzeige['rubrik_id']) echo 'selected';?>><?php echo $anzeige['rubrik_id'];?>&nbsp;&nbsp;&nbsp;<?php echo $anzeige['rubrik_bezeichnung'];?></option>
<?php
$subhol = mysql_query("SELECT * FROM rubriken WHERE rubrik_parent_id = '".$anzeige['rubrik_id']."' ORDER BY rubrik_bezeichnung");
while ($subanzeige = mysql_fetch_array($subhol)) {
?>
<option value="<?php echo $anzeige['rubrik_id'];?>" <? if ($_POST['rubrik'] == $anzeige['rubrik_id']) echo 'selected';?>>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $subanzeige['rubrik_id'];?>&nbsp;&nbsp;&nbsp;<?php echo $subanzeige['rubrik_bezeichnung'];?></option>
<?php
}
}
?>
</select>


Jo, ich würde mich sehr freuen, wenn da jemand von euch sich mal dran setzen könnte... ... ausgelobter Preis 5 Eu mit Rechnung :biggrin1::yes:
jpwfour
16.04.2010, 14:20
So in etwa, ohne Garantie :wink:


<!--SELECT dynamisch belegen-->
<script type="text/javascript">
var valuesSec = new Array(
new Array("--"),
<?php
$outc = 1;
$uhol = mysql_query("SELECT * FROM rubriken WHERE rubrik_parent_id = '0' ORDER BY rubrik_bezeichnung");
while ($anzeige = mysql_fetch_array($uhol)) {
?>
new Array(
<?php
$inc = 1;
$subhol = mysql_query("SELECT * FROM rubriken WHERE rubrik_parent_id = '".$anzeige['rubrik_id']."' ORDER BY rubrik_bezeichnung");
while ($subanzeige = mysql_fetch_array($subhol)) {
?>
new Array("<?php echo $subanzeige['rubrik_bezeichnung'];?>", "<?php echo $subanzeige['rubrik_id'];?>")<?php if($inc<mysql_num_rows($subhol)) echo ',';?>
<?php
$inc++;
}
?>
) <?php if($outc<mysql_num_rows($uhol)) echo ',';?>
<?php
$outc++;
}?>
);

function setSecondary() {
nPos = document.myForm.firstSel.selectedIndex;
nOldLength = document.myForm.secondSel.length;
nNewLength = valuesSec[nPos].length;
for(i=0; i<nNewLength; i++) {
document.myForm.secondSel.options[i] = new Option(valuesSec[nPos][i][1]);
document.myForm.secondSel.options[i].value = valuesSec[nPos][i][0];
if (i==0) document.myForm.secondSel.selectedIndex = 0;
}
for(i=nOldLength; i>nNewLength; ) document.myForm.secondSel.options[--i] = null;
}
</script>
ElDani
19.04.2010, 09:36
hmm, danke, jpwfour,
aber irgendwie zeigt der Code grad gar nix an..

edit: ich hab grad noch bissel damit rumgebastelt, leider bisher erfolglos.. im Netz hab ich noch den Hinweis gefunden, daß javascript kein php beinhalten kann, aber php kann javascript ausgeben.. leuchtet mir ein, aber beim basteln stieß ich auf ein neues Problem: wie kann ich die komplette Funktion als Javascript übergeben, so daß dann das for() als javascript und nicht als php ausgeführt wird?

bitte kann das jemand fertig schrauben?
ich will das doch nur fix einbaun..
jpwfour
19.04.2010, 14:26
? Javascript /PHP?

Ich gehe davon aus, dass der Code in eine php Datei so eingesetzt wird, indem Fall parst PHP das und generiert normalen Text daraus, der dann später als JS ausgeführt wird.

Wie sieht die Ausgabe (also der Quelltext der Datei im Browser) denn aus wenn du den Code einbaust?
ElDani
19.04.2010, 14:36
das is der Code hinter ner weißen Seite..


<!--SELECT dynamisch belegen-->
<script type="text/javascript">
var valuesSec = new Array(
new Array("--"),
new Array(
new Array("Einkaufsberatung", "2"),
new Array("Finanzen &amp; Steuern", "3"),
new Array("Gesundheitsberatung", "4"),
new Array("Lebensberatung", "5"),
new Array("Mode- &amp; Stilberatung", "6"),
new Array("Rechtsberatung", "7"),
new Array("Technische Beratung", "8"),
new Array("Versicherungen", "53")
) , new Array(
new Array("Babysitting", "10"),
new Array("Ersatzgroßeltern", "11"),
new Array("Krankenpflege", "12"),
new Array("Seniorenbetreuung", "13"),
new Array("Tierbetreuung", "14")
) , new Array(
new Array("Bildbände", "16"),
new Array("Bücherkisten", "17"),
new Array("Comics", "18"),
new Array("Esoterik", "19"),
new Array("Hörbücher", "20"),
new Array("Jugendbücher", "22"),
new Array("Kinderbücher", "21"),
new Array("Romane", "23"),
new Array("Sach- &amp; Fachliteratur", "24"),
new Array("Schulbücher", "25"),
new Array("Zeitschriften", "26")
) , new Array(
new Array("Büroarbeiten", "28"),
new Array("Büromöbel", "29"),
new Array("Bürotechnik", "30"),
new Array("Fachlicher Rat", "31"),
new Array("Schreibwaren", "32"),
new Array("Übersetzung", "33")
) , new Array(
new Array("Apple &amp; Zubehör ", "35"),
new Array("Computer-Literatur", "36"),
new Array("Computer-Nostalgie", "37"),
new Array("Desktop-PC", "38"),
new Array("Drucker &amp; Scanner", "43"),
new Array("Festplatten", "40"),
new Array("Grafikkarten", "39"),
new Array("Kabel und Adapter", "41"),
new Array("Laufwerke aller Art", "52"),
new Array("Monitore", "51"),
new Array("Netzwerk &amp; Zubeh&ouml;r", "44"),
new Array("Notebook / Laptop", "45"),
new Array("PC-Hilfe &amp; Unterricht", "46"),
new Array("Software", "47"),
new Array("Sonstiges Zubehör", "48"),
new Array("Speicher &amp; CPU", "42"),
new Array("Spiele aller Art", "49"),
new Array("Spielkonsolen", "50")
) , new Array(
new Array("Audio &amp; HiFi", "55"),
new Array("Car-HiFi &amp; Elektronik", "56"),
new Array("Handys, Navi &amp; PDA", "57"),
new Array("Haustechnik", "58"),
new Array("Heimkino", "59"),
new Array("Portable Player", "60"),
new Array("Technik für Bastler", "61"),
new Array("Telefon &amp; -anlagen", "62"),
new Array("TV &amp; Video", "63")
) , new Array(
new Array("Ernährungsberatung", "66"),
new Array("Genussmittel", "67"),
new Array("Kochen &amp; Backen", "68"),
new Array("Lebensmittel", "69"),
new Array("Reifen &amp; Zubehör", "76")
) , new Array(
new Array("Autos", "71"),
new Array("Fahrrad &amp; Zubehör", "72"),
new Array("Motorräder &amp; Roller", "73"),
new Array("Nutzfahrzeuge", "74"),
new Array("Oldtimer", "75"),
new Array("Sonstige Fahrzeuge", "77"),
new Array("Stellplatz &amp; Garage", "78"),
new Array("Transport &amp; Umzug", "79"),
new Array("Tuning &amp; Ersatzteile", "80"),
new Array("Wohnwagen & -mobile", "81")
) , new Array(
new Array("Andere Medien", "83"),
new Array("CD&acute;s", "84"),
new Array("DVD&acute;s", "85"),
new Array("Schallplatten", "86"),
new Array("Videokassetten", "87")
) , new Array(
new Array("Außendekoration", "89"),
new Array("Bäume &amp; Pflanzen", "90"),
new Array("Gartenarbeit", "91"),
new Array("Gartenbau &amp; -pflege", "92"),
new Array("Gartengeräte", "93"),
new Array("Gartenmöbel", "94"),
new Array("Saatgut &amp; Anbau", "95")
) , new Array(
new Array("Alternative Heilung", "97"),
new Array("Duft &amp; Aroma", "98"),
new Array("Gesundheitsartikel", "100"),
new Array("Gesundheitsmöbel", "101"),
new Array("Gesundheitsratgeber", "102"),
new Array("Heilmittel", "99"),
new Array("Licht &amp; Wärme", "105"),
new Array("Massage &amp; Co.", "103"),
new Array("Medizintechnik", "104"),
new Array("Yoga &amp; Meditation", "106")
) , new Array(
new Array("Arbeitskleidung", "108"),
new Array("Arbeitsschutz", "109"),
new Array("Forstwirtschaft", "118"),
new Array("Landwirtschaft", "110"),
new Array("Maschinen", "117"),
new Array("Material", "111"),
new Array("Messgeräte", "112"),
new Array("Renovierung", "113"),
new Array("Reparaturen", "114"),
new Array("Um- &amp; Ausbau", "115"),
new Array("Werkzeug", "116")
) , new Array(
new Array("Deko &amp; Beleuchtung", "120"),
new Array("Feng-Shui", "121"),
new Array("Geschirr &amp; Besteck", "122"),
new Array("Haushaltsgeräte", "123"),
new Array("Haushaltshilfe", "124"),
new Array("Haushaltswaren", "125"),
new Array("Möbel &amp; Einrichtung", "126"),
new Array("Reparatur & Wartung", "127"),
new Array("Zimmerpflanzen", "128")
) , new Array(
new Array("Bastelarbeiten", "130"),
new Array("Computerkunst", "131"),
new Array("Fotografie", "132"),
new Array("Handarbeit", "133"),
new Array("Modellbau &amp; RC", "134")
) , new Array(
new Array("Babykleidung", "141"),
new Array("Kinder-Filme", "138"),
new Array("Kinder-Hörspiele", "137"),
new Array("Kinderbücher", "136"),
new Array("Kindererziehung", "140"),
new Array("Kinderkleidung", "143"),
new Array("Kindermöbel", "139"),
new Array("Schulsachen", "144")
) , new Array(
new Array("Damenbekleidung", "146"),
new Array("Herrenbekleidung", "147"),
new Array("Jugendkleidung", "142")
) , new Array(
new Array("Gemälde & Zeichnung", "154"),
new Array("Musikinstrumente", "155"),
new Array("Skulpturen", "156"),
new Array("Veranstaltungen", "157")
) , new Array(
new Array("Fremdsprachen", "159"),
new Array("Nachhilfe", "160"),
new Array("Prüfungsvorbereitung", "161"),
new Array("Unterricht", "162")
) , new Array(
new Array("Alte Dokumente", "173"),
new Array("Ansichtskarten", "165"),
new Array("Antiquitäten", "166"),
new Array("Autogramme &amp; Co.", "170"),
new Array("Bierdeckel &amp; Co.", "167"),
new Array("Briefmarken", "168"),
new Array("Buttons &amp; Pins", "169"),
new Array("Feuerzeuge &amp; -hölzer", "171"),
new Array("Gläser &amp; Geschirr", "172"),
new Array("Modellautos", "176"),
new Array("Münzen &amp; Banknoten", "177"),
new Array("Puppen &amp; Figuren", "178"),
new Array("Sammelkarten", "190"),
new Array("Sticker & Bilder", "175"),
new Array("Technik (Antiquitäten)", "179"),
new Array("Telefonkarten", "180"),
new Array("Ü-Ei-Figuren", "181"),
new Array("Werbeartikel", "182")
) , new Array(
new Array("Accessoires", "149"),
new Array("Kosmetik", "151"),
new Array("Pflege & Hygiene", "150"),
new Array("Uhren &amp; Schmuck", "152")
) , new Array(
new Array("Ausflüge", "184"),
new Array("Ausrüstung", "185"),
new Array("Freizeit-Aktivitäten", "186"),
new Array("Gemeinsam spielen", "187"),
new Array("Tanzen / Tanzpartner", "188"),
new Array("Veranstaltungen", "189")
) , new Array(
new Array("Sportbekleidung", "192"),
new Array("Sportgeräte", "193"),
new Array("Sportzubehör", "194"),
new Array("Training &amp; Anleitung", "195")
) , new Array(
new Array("Aquaristik", "197"),
new Array("Hunde &amp; Katzen", "198"),
new Array("Kleintiere", "199"),
new Array("Rat &amp; Tat", "200"),
new Array("Rund um&acute;s Pferd", "201"),
new Array("Terraristik", "202"),
new Array("Vögel", "203")
) , new Array(
new Array("Gebäude", "210"),
new Array("Grundstücke", "205"),
new Array("Mitbewohner", "206"),
new Array("Schlafgelegenheit", "207"),
new Array("Wohnung", "209"),
new Array("Wohnung auf Zeit", "208")
) , new Array(
new Array("Camping", "214"),
new Array("Ferienwohnungen", "212"),
new Array("Gepäck", "215"),
new Array("Haushüter", "219"),
new Array("Leihfahrzeuge", "217"),
new Array("Mitfahrgelegenheit", "218"),
new Array("Reisetipps &amp; -führer", "216"),
new Array("Unterkunft", "213")
) );

function setSecondary() {
nPos = document.myForm.firstSel.selectedIndex;
nOldLength = document.myForm.secondSel.length;
nNewLength = valuesSec[nPos].length;
for(i=0; i<nNewLength; i++) {
document.myForm.secondSel.options[i] = new Option(valuesSec[nPos][i][1]);
document.myForm.secondSel.options[i].value = valuesSec[nPos][i][0];
if (i==0) document.myForm.secondSel.selectedIndex = 0;
}
for(i=nOldLength; i>nNewLength; ) document.myForm.secondSel.options[--i] = null;
}
</script>


ich werd das jetzt mal mit heim nehmen, mal sehn, ob ich heut abend noch bissel zum basteln komme.. :)
jpwfour
19.04.2010, 17:15
Der HTML Code gehört dann natürlich auch noch dazu.

Wenn ich das zusammen in eine Datei reinstecke, funktioniert es bei mir, einzig die 2 Felder Beschreibung und ID sind vertauscht, also so bekommt man bspw. zum 1. Eintrag dann ne Liste mit 2,3,4,5,6,7,8,53.


Dazu einfach dann:
rubrik_bezeichnung und rubrik_id
austauschen.
ElDani
19.04.2010, 19:27
der html-code, wie ich ihn oben hatte? kann ich das so zusammenbasteln? mal sehn.. :)
ElDani
20.04.2010, 12:19
oki, nu habsch das zusammengefügt, hier der Code:


<!--SELECT dynamisch belegen-->
<script type="text/javascript">
var valuesSec = new Array(
new Array("--"),
<?php
$outc = 1;
$uhol = mysql_query("SELECT * FROM rubriken WHERE rubrik_parent_id = '0' ORDER BY rubrik_bezeichnung");
while ($anzeige = mysql_fetch_array($uhol)) {
?>
new Array(
<?php
$inc = 1;
$subhol = mysql_query("SELECT * FROM rubriken WHERE rubrik_parent_id = '".$anzeige['rubrik_id']."' ORDER BY rubrik_bezeichnung");
while ($subanzeige = mysql_fetch_array($subhol)) {
?>
new Array("<?php echo $subanzeige['rubrik_id'];?>", "<?php echo $subanzeige['rubrik_bezeichnung'];?>")
<?php if ($inc<mysql_num_rows($subhol)) echo ','; ?>
<?php $inc++;
}
?>
) <?php if($outc<mysql_num_rows($uhol)) echo ',';?>
<?php
$outc++;
}
?>
);

function setSecondary() {
nPos = document.myForm.firstSel.selectedIndex;
nOldLength = document.myForm.secondSel.length;
nNewLength = valuesSec[nPos].length;
for(i=0; i<nNewLength; i++) {
document.myForm.secondSel.options[i] = new Option(valuesSec[nPos][i][1]);
document.myForm.secondSel.options[i].value = valuesSec[nPos][i][0];
if (i==0) document.myForm.secondSel.selectedIndex = 0;
}
for(i=nOldLength; i>nNewLength; ) document.myForm.secondSel.options[--i] = null;
}
</script>



<div align="center">
<form id="myForm" name="myForm" action="" method="POST">
<select id="firstSel" name="firstSel" onChange="setSecondary();">
<option>Bitte wähle:</option>
<option value="<?php echo $anzeige['rubrik_id'];?>" <?php if ($_POST['rubrik'] == $anzeige['rubrik_id']) echo

'selected';?>>&nbsp;&nbsp;&nbsp;<?php echo $anzeige['rubrik_bezeichnung'];?></option>
</select>
<select id="secondSel" name="secondSel">
<option>--</option>
<option value="<?php echo $anzeige['rubrik_id'];?>" <? if ($_POST['rubrik'] == $anzeige['rubrik_id']) echo

'selected';?>>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $subanzeige['rubrik_id'];?>&nbsp;&nbsp;&nbsp;<?php echo

$subanzeige['rubrik_bezeichnung'];?></option>
</select>
<input type="submit" value="Ab die Post">
</form>
</div>

jetzt steht auch schon was im Formular: erst, wenn ich beide Options im ersten Select jeweils einmal ausgewählt hab, dann erscheinen im zweiten Select die subkategorien der ersten Kategorie.. (deren Bezeichnung im ersten Select aber nicht angezeigt wird, nur 'Bitte wähle' und 1x leer)

ich glaub, die Hauptkategorien werden noch nicht eingelesen, die stehn auch noch nich im Array (Quelltext oben..)

der Quelltext zum Formular sieht jetzt so aus:



<div align="center">
<form id="myForm" name="myForm" action="" method="POST">
<select id="firstSel" name="firstSel" onChange="setSecondary();">
<option>Bitte wähle:</option>
<option value="" selected>&nbsp;&nbsp;&nbsp;</option>
</select>
<select id="secondSel" name="secondSel">
<option>--</option>
<option value="" selected>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
</select>
<input type="submit" value="Ab die Post">
</form>
</div>


kannste da bitte nochmal drüber schaun?
oder sieht jmd anders den nächsten Schritt?
jpwfour
20.04.2010, 12:37
Die Hauptkategorien gehören ja so wie ich das sehe in das HTML Formular unten direkt rein, etwa so:


<select name="rubrik">
<option value="" <? if ($_POST['rubrik'] == "0") echo 'selected';?>>Bitte wähle:</option>
<?php
$uhol = mysql_query("SELECT * FROM rubriken WHERE rubrik_parent_id = '0' ORDER BY rubrik_bezeichnung");
while ($anzeige = mysql_fetch_array($uhol)) {
?>
<option value="<?php echo $anzeige['rubrik_id'];?>" <? if ($_POST['rubrik'] == $anzeige['rubrik_id']) echo 'selected';?>><?php echo $anzeige['rubrik_id'];?>&nbsp;&nbsp;&nbsp;<?php echo $anzeige['rubrik_bezeichnung'];?></option>
<?php
}
?>
</select>
ElDani
20.04.2010, 15:32
ja, jetzt funktioniert das :)
ich danke dir :)

hmm, wenn ich das so ^in ner extra-datei habe, funktioniert das prima, wenn ich das jetzt aber in das größere Formular einbaue, zeigts im 2. Select nix mehr an..

hab schon den Java-Script-Teil ganz an den Anfang gesetzt, oder auch direkt ins gleiche <td>-Feld wie die Select's - leider beides ohne Erfolg
muß ich da noch irgendwas beachten, zwecks wo ich den Code hinschieb oder so?
ElDani
21.04.2010, 13:54
so, jetzt gehts :)
ich hatte im Open-Form-Tag geschrieben <... method="post"> ... und seit ich dort <... method="POST"> draus gemacht hab, funzt es nun auch dort :)

herr jpwfour, wennste mir deine Kontodaten gibst, schick ich dir gerne den 5er :)
jpwfour
21.04.2010, 17:48
Kannst ja 5 Klammlose an die ID
.
.
.
.
.
.
.
.
.
.
<-- schicken :wink:
ElDani
22.04.2010, 04:32
so, das haste davon.. mehr Lose hatt ich grad nich :p
:) Dankeschön! :)
ElDani
10.05.2020, 15:56
huhu? gibt es hier noch jemanden? :suspicious:
isaack
11.05.2020, 15:07
was hast du den hier ausgegraben?
ElDani
12.05.2020, 16:29
Hiho! ... eine hilfreiche Script-Idee, die leider inzwischen nich mehr funktioniert... :/
isaack
13.05.2020, 09:45
was geht den daran nicht mehr?
der PHP teil oder der Javascript teil?
ElDani
13.05.2020, 22:19
hmm, naja.. :)) inzwischen hab ich die DB-Abfrage wieder hinbekommen, aber das Javascript für die Select-Felder funzt noch nich wieder..
kannst du so was?

.. ich arbeite mich grad bissel in PDO etc. ein...
isaack
18.05.2020, 14:55
was macht den da das selct dann?
gibt es eine meldung in der console?
Zeig doch mal den JS teil einfach mal her, wie du das jetzt bei dir drin hast.