Dropdownfeld dynamisch füllen

PHP-Frage · 2. April 2015

Guten Abend,

durch das Forum konnte ich schon einige lernen. Hab mich nun entschlossen hier anzumelden da ich einfach nicht mehr weiter kommen. Ich hoffe mein Vorhaben ist nicht so schwer umzusetzen. ich bin schon am verzweifeln.

Ich habe in meiner Datenbank zwei Tabellen (an diesen kann ich leider auch nichts mehr ändern, da diese bereits mehrere Tausend Einträge haben)

SQL

CREATE TABLE IF NOT EXISTS `web_hersteller` (
`h_id` int(11) NOT NULL,
  `h_titel` varchar(100) NOT NULL,
  `h_titelURL` varchar(100) NOT NULL,
  `h_status` varchar(2) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=38 DEFAULT CHARSET=utf8;

SQL

CREATE TABLE IF NOT EXISTS `web_serien` (
`s_id` int(11) NOT NULL,
  `s_hID` varchar(100) NOT NULL,
  `s_titel` varchar(200) NOT NULL,
  `s_titelUrl` varchar(200) NOT NULL,
  `s_status` varchar(1) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=127 DEFAULT CHARSET=utf8;

In der ersten Tabelle in alle Hersteller vorhanden z.B.

Brother
Canon
Dell

In der zweiten Tabelle in alle Serien aufgelistet z.B.

AX
BSE
CE

Das erste Auswahlfeld mit den Herstellern lasse ich durch diesen (auch hier im Forum gefunden und angepassten) Code füllen:

PHP

function hersteller($mysqli) {
		$stmt = $mysqli->prepare("SELECT id, titel, titelURL, status FROM web_hersteller");
		$stmt->execute();
		$stmt->bind_result($id, $titel, $titelURL, $status);
		$stmt->store_result();

		if($stmt->num_rows() >  0) {     
			while ($stmt->fetch()){
				$hersteller[] = array( 
					'id' 			=> $id, 
					'titel' 		=> $titel, 
					'titelURL' 		=> $titelURL, 
					'status'		=> $status
				);
			}
			return $hersteller;
			}
	}

Alles anzeigen

PHP

<select name="hersteller" id="hersteller">
<option>-- Bitte wählen --</option>
<?php 
$hersteller = hersteller($mysqli);
foreach($hersteller as $array){ ?>
<option value="<?php echo $array['id'];?>"<?php echo ($s_hID == $array['id'] ? "selected" : "");?>><?php echo $array['titel'];?></option>
<?php } ?>
</select>

Klappt auch alles wunderbar. Nun habe ich ein zweites Auswahlfeld mit allen Serien dieses wird mit diesem PHP Code gefüllt

PHP

function serien($mysqli) {
		$stmt = $mysqli->prepare("SELECT id, hID, titel, titelUrl, status, titel FROM web_serien LEFT JOIN web_hersteller ON web_hersteller.id = web_serien.hID");
		$stmt->execute();
		$stmt->bind_result($id, $hID, $titel, $titelUrl, $status, $titel);
		$stmt->store_result();

		if($stmt->num_rows() >  0) {     
			while ($stmt->fetch()){
				$serien[] = array( 
					'id' 			=> $id, 
					'hID' 			=> $hID, 
					'titel' 		=> $titel, 
					'titelUrl'		=> $titelUrl,
					'status'		=> $status,
					'titel'			=> $titel
				);
			}
			return $serien;
			}
	}

Alles anzeigen

PHP

<select name="serien" id="serien">
<option>-- Bitte wählen --</option>
<?php 
$serien = serien($mysqli);
foreach($serien as $array){ ?>
<option value="<?php echo $array['id'];?>"<?php echo ($hID == $array['id'] ? "selected" : "");?>><?php echo $array['titel'];?></option>
<?php } ?>
</select>

Ab jetzt fangen meine Probleme an. Das zweite Auswahlfeld darf natürlich nur diese Daten beinhalten, die zum Hersteller passen, welchen ich im ersten Auswahlfeld ausgewählt habe. Ist im ersten noch nichts ausgewählt, sollte das untere leer sein. Gut währe, wenn die Seite nicht neu aufgebaut wird. Ich habe hier http://www.blogrammierer.de/jq…-boxen-mit-ajax-befullen/ auch etwas gefunden, aber das sieht für mich nicht wirklich gut aus, denn dann hätte ich ja ständig alle Daten in einer Datei stehen?

Ich hoffe ich habe es so geschrieben, dass ihr mein Problem erkennt und mir wenn möglich helfen könnt. Hoffe es ist nicht all zuschwer.

cottton · 2. April 2015

Du hast da paar Fehler in den Queries.
In dem Create Statement heiße es h_titel oder s_titel,
in den Queries schreibst Du dann aber title.
Oder auch web_hersteller.id -- gibts nicht. web_hersteller.h_id gibts =)

Hier mal ein "Concept":

HTML

<?php
    $data_hersteller = ... $mysqli->prepare("
    SELECT
        h_id,
        h_titel,
        h_titelURL,
        h_status,
        FROM web_hersteller
        -- WHERE h_status = ? evtl per status greifen?
    ");
    $data_serien = ... $mysqli->prepare("
    SELECT
        s_id,
        s_hID,
        s_titel,
        s_titelUrl,
        s_status
    FROM web_serien
    JOIN web_hersteller ON web_hersteller.h_id = web_serien.s_hID
    -- WHERE ?_status = ? evtl per status greifen?
    ");
?>




<html>
    ...
    ...
<head>
    ...
    ...
<script>
function getHerstellerBy_h_id(h_id){ // momentan ungenutzt
    // hier kann man später per ajax die daten live holen
    // vorerst nur per definiertem array
    var hersteller = JSON.parse(<?php echo json_encode($data_hersteller); ?>);
    if(typeof h_id === "undefined"){
        // wir wollen alle
        return hersteller;
    }
    // wir wollen einen bestimmte
    return (typeof hersteller[h_id] !== "undefined") ? hersteller[h_id] : false;
}
function getSerienBy_h_id(h_id){
    // hier kann man später per ajax die daten live holen
    // vorerst nur per definiertem array
    var serien = JSON.parse(<?php echo json_encode($data_serien); ?>);
    if(typeof h_id === "undefined"){
        // wir wollen alle
        return serien;
    }
    // wir wollen alle serien die zu h_id gehören
    var ret = [];
    for(var s_id in serien){
        if(serien[s_id]["s_hID"] !== h_id){
            // ist keine serie mit der gesuchten h_id
            continue; // fahre fort / überspringe
        }
        ret[s_id] = serien[s_id];
    }
    return ret;
}
function updateSecodSelectfield(){
    // this sollte das selectfield sein
    // this.value sollte die value der gewählten <option> sein
    if(!this.value){
        // nichts ausgewählt
        return null;
    }
    var // die gewählte h_id
        h_id = this.value,
        // hole alle serien
        serien = getSerienBy_h_id(h_id),
        // "greife" das 2te select feld
        SelectSerien = document.getElementById("serien"),
        // temp object
        Option_tmp;
    // evtl zuvor gesetzte <option> felder aus dem 2ten select feld löschen
    SelectSerien.innerHTML = "";
    // für jede serie in serien
    for(var s_id in serien()){
        // erstelle <option> feld
        Option_tmp = document.createElement("option");
        // setze option feld value
        Option_tmp.value = s_id;
        // setze option feld text
        Option_tmp.appendChild( document.createTextNode( s_id["s_titel"] ) );
        // hänge das neue <option> feld an das 2te select feld an
        SelectSerien.appendChild( Option_tmp );
    }
    return;
}




document.onreadystatechange = function(){
    if(document.readyState == "complete"){
        // fall du per $_POST['hersteller'] das erste selectfeld beim laden setzen willst,
        // dann führen wir hier das update des 2ten selectfeldes einmal aus, damit das auf dem aktuellen stand ist
        updateSecodSelectfield();
    }
}
</script>
</head>




<body>
<select name="hersteller" id="hersteller" onchange="updateSecodSelectfield()">
    <option>-- Bitte wählen --</option>
<?php
foreach($data_hersteller as $h_id => $hersteller){
    $selected = (isset($_POST['hersteller'])and (int)$_POST['hersteller'] === $h_id) ? 'selected' : '';
?>
    <option
        value="<?php echo htmlspecialchars($h_id); ?>"
        <?php echo $selected ?>
    ><!-- <option tag schließen -->
        <?php echo htmlspecialchars($hersteller['h_titel']);?>
    </option>
<?php
} // /foreach
?>
</select>




<select name="serien" id="serien"></select>




</body>
</html>

Alles anzeigen

Empfehlung:
Backup vor irgendwelchen Änderungen:
(achtung! könnte lange dauern, wenn die maschiene lahmt und "viele" datensätze kopiert werden müssten =)

SQL

create table `web_hersteller_kopie` like `web_hersteller`;
insert into `web_hersteller_kopie` select * from `web_hersteller`;
create table `web_serien_kopie` like `web_serien`;
insert into `web_serien_kopie` select * from `web_serien`;

tabelle hersteller ändern:

SQL

ALTER TABLE 
    `web_hersteller` 
CHANGE COLUMN 
    `h_id` `h_id`           -- `name alt` `name neu` - bleibt also gleich
    INT(11) 
    UNSIGNED                -- ganze zahl ohne vorzeichen (siehe google "mysql int types")
    NOT NULL 
    AUTO_INCREMENT,         -- lass die db die id hochzählen
ADD PRIMARY KEY (`h_id`);   -- h_id wird primary key

tabelle serien ändern:

SQL

ALTER TABLE 
    `web_serien` 
CHANGE COLUMN 
    `s_id` `s_id`       -- `name alt` `name neu` - bleibt also gleich
    INT(11) 
    UNSIGNED            -- ganze zahl ohne vorzeichen (siehe google "mysql int types")
    NOT NULL 
    AUTO_INCREMENT,     -- lass die db die id hochzählen
CHANGE COLUMN 
    `s_hID` `s_hID` 
    INT(11)             -- geändert auf int statt varchar, da die h_id im tbl hersteller ja auch int ist =)
    UNSIGNED            -- ganze zahl ohne vorzeichen (siehe google "mysql int types")
    NOT NULL,
ADD PRIMARY KEY (`s_id`), -- s_id wird primary key




-- foreign key (fremdschlüssel) verwenden
-- ^= eine beziehung zw den beiden tbl herstellen
-- dafür brauchen wir einen index auf s_hID
ADD INDEX `fk_web_hersteller_h_id` (`s_hID` ASC);




-- den fremdschlüssel erstellen
ALTER TABLE 
    `web_serien` 
ADD CONSTRAINT 
    `fk_web_hersteller_h_id`            -- fremdschlüssel name
  FOREIGN KEY (`s_hID`)                 -- fremdschlüssel (in etwa "das hier ist der fremde schlüssel" :) 
  REFERENCES `web_hersteller` (`h_id`)  -- die referenz (in etwa "der fremdschlüssel zeigt auf ...")
  ON UPDATE CASCADE                     -- wenn sich die h_id in hersteller ändert, dann übernimm diesen wert (wichtig um beziehung zu erhalten)
  ON DELETE RESTRICT;                   -- wenn in hersteller der datensatz mit der h_id x gelöscht wird, die h_id in tbl serien aber genutzt wird -> löschen verweigen (wichtig um beziehung zu erhalten)

Alles anzeigen

PHP-Frage · 3. April 2015

Hallo,

danke für deine Antwort. Aber es funktioniert leider nicht. Ich darf a) leider NICHTS an der Datenbank ändern, da diese Daten von extern kommen und ich unterschrieben musste, dass die Daten genau so genutzt werden, wie diese geliefert werden und an den Scripten kann ich auch kaum noch etwas ändern, da so viel andere Sachen schon damit verbunden sind. Ich muss schauen wie ich das mit meinem Code gelöst bekomme.

EDIT:

Ich habe mal deinen Code eingebaut und es sieht im Quelltext sehr nach Fehler aus? :o

[Blockierte Grafik: http://fs1.directupload.net/images/150403/lbsxubbs.jpg]

Außerdem bleibt mein Feld Serien leider komplett leer. Ist es sinnvoll ALLE Daten im Quelltext ausgeben zu lassen? Ich finde das ehrlichgesagt nicht wirklich schön.

cottton · 3. April 2015

Die db-Änderungen sind nur Vorschläge.

Was Du da im Screenshot zeigst ist das, was auch erwartet wurde:
PHP legt die Daten als json String ab, und die JS Funktion wandelt diesen bei Aufruf um.
Wie gesagt - das soll erstmal nur als "Schnittstelle" dienen.

Zitat

// hier kann man später per ajax die daten live holen

Später kannst Du dort drin per ajax die Daten einzeln laden.

Das ist natürlich keine Copy-Paste-Code, den Du direkt nutzen kannst. Du musst es schon anpassen.
Hier gint es mehr um den Ablauf. =)

PHP-Frage · 3. April 2015

Dazu hätte ich noch eine Frage, warum müssen die Daten aus der Datenbank genauso ausgegeben werden wie auf dem Bild bisschen weiter oben zu sehen ist? Würde es nicht mit „normalen“ Daten gehen, wie ich auch das erste Dropdown fülle? Also eine ganz „normale“ Datenbankabfrage?

Hab da hier https://www.youtube.com/watch?v=TvTQnVIAnQY gesehen.

wolf · 3. April 2015

Die Daten werden in eine 'freundliche' form gebracht um sie zu VERARBEITEN.
Du kann jetzt wie schon geschrieben via ajax die Daten dann Abholen und via JSON zu einem Array umwandeln. Dann kannst du damit deine Felder befüllen..

Dropdownfeld dynamisch füllen

Jetzt mitmachen!

Teilen