Tutorials
Dropdown linken aan een andere dropdown
Je ziet het wel eens bij een autoverkooppagina. Een dropdown met het merk en daarna komt er een dropdown met een type auto. hier gaat deze ook over.
Pagina 1
De dropdown functie
Als eerste gaan we de dropdown functie maken. We includen de database connectie, zodat we dit makkelijker kunnen gaan gebruiken wanneer je meerdere pagina krijgt, zodat je alles maar 1x hoeft op te schrijven. dan voegen we de javascript in zodat we de pagina gereload krijgen wanneer er op een merk gedrukt wordt. dan komt de php functie voor meer uitleg zie de comments
<?php
// include de database connectie
include("config.php");
include("db.php");
?>
<html>
<head><title>de dropdown functie</title>
<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.merk.options[form.merk.options.selectedIndex].value;
self.location='dd.php?merk=' + val ;
}
</script>
<head>
<body>
<?php
///////// pak de data uit de db//////////
$quer2=DoQuery("SELECT DISTINCT merk,merk_id FROM merk order by merk");
/////////////einde////////////
/////// als in de eerste dropdown niks geselect is dan laat de 2de drop alles zien/////
if(isset($poule) and strlen($poule) > 0){
$quer=DoQuery("SELECT DISTINCT type FROM type where merk_id=$merk order by merk_id");
}else{$quer=DoQuery("SELECT DISTINCT type FROM type order by merk_id"); }
////////// einde ///////////////////////////
echo "<form method=post name=f1 action=''>";
////////// eerste drop /////////
echo "<select name='merk' onchange=\"reload(this.form)\"><option value=''>Selecteer merk</option>";
while($line = mysql_fetch_array($quer2))
{
if($line['merk_id']==@$merk)
{echo "<option selected value='$line[merk_id]'>$line[merk]</option>"."<BR>";
}else{
echo "<option value='$line[merk_id]'>$line[merk]</option>";
}
}
echo "</select>";
////////////////// einde ///////////
////////// 2de drop /////////
echo "<select name='type'><option value=''>Selecteer type</option>";
while($line2 = mysql_fetch_array($quer)) {
echo "<option value='$line2[type_id]'>$line2[type]</option>";
}
echo "</select>";
////////////////// einde ///////////
echo "</form>";
echo "<input type='text' name='test' value=''>";
?>
</body>
</html>
<?php
// include de database connectie
include("config.php");
include("db.php");
?>
<html>
<head><title>de dropdown functie</title>
<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.merk.options[form.merk.options.selectedIndex].value;
self.location='dd.php?merk=' + val ;
}
</script>
<head>
<body>
<?php
///////// pak de data uit de db//////////
$quer2=DoQuery("SELECT DISTINCT merk,merk_id FROM merk order by merk");
/////////////einde////////////
/////// als in de eerste dropdown niks geselect is dan laat de 2de drop alles zien/////
if(isset($poule) and strlen($poule) > 0){
$quer=DoQuery("SELECT DISTINCT type FROM type where merk_id=$merk order by merk_id");
}else{$quer=DoQuery("SELECT DISTINCT type FROM type order by merk_id"); }
////////// einde ///////////////////////////
echo "<form method=post name=f1 action=''>";
////////// eerste drop /////////
echo "<select name='merk' onchange=\"reload(this.form)\"><option value=''>Selecteer merk</option>";
while($line = mysql_fetch_array($quer2))
{
if($line['merk_id']==@$merk)
{echo "<option selected value='$line[merk_id]'>$line[merk]</option>"."<BR>";
}else{
echo "<option value='$line[merk_id]'>$line[merk]</option>";
}
}
echo "</select>";
////////////////// einde ///////////
////////// 2de drop /////////
echo "<select name='type'><option value=''>Selecteer type</option>";
while($line2 = mysql_fetch_array($quer)) {
echo "<option value='$line2[type_id]'>$line2[type]</option>";
}
echo "</select>";
////////////////// einde ///////////
echo "</form>";
echo "<input type='text' name='test' value=''>";
?>
</body>
</html>
Pagina 2
De includes
om een goede connectie naar de database te krijgen moet je deze includes erbij zetten.
----------config.php-------------
<?php
//database configuratie variabelen
$mysqlhost = 'jouw host'; //hostname of ip-nummer van de mysql server
$mysqluser = 'jou mysql inlognaam'; //username
$mysqlpws = 'jou mysql wachtwoord'; //password
$mysqldb = 'jou database'; //welke database gebruiken we binnen de mysql server
?>
-----------db.php---------------
<?php
function DoQuery( $query ) //deze zielige alleenstaande functie in db.php wordt gebruikt om het verbinnden met de database in andere pagina wat te verkorten
{
global $mysqlhost, $mysqluser, $mysqlpws, $mysqldb; //gegevens uit config.php global maken anders kan ik ze hier niet gebruiken
$link = mysql_connect($mysqlhost, $mysqluser, $mysqlpws) //verbinding maken met de gegevens uit config.php
or die('Could not connect: ' . mysql_error()); //foutmelding geven bij niet kunnen connecten, dit moet misschien nog wat netter
mysql_select_db($mysqldb) or die('Could not select database'); //mysql database selecteren uit config.php
$result = mysql_query($query) or die('Query failed: ' . mysql_error()); // Perform SQL query
return $result; //resultaat terugsturen naar de vragende pagina
}
?>
----------config.php-------------
<?php
//database configuratie variabelen
$mysqlhost = 'jouw host'; //hostname of ip-nummer van de mysql server
$mysqluser = 'jou mysql inlognaam'; //username
$mysqlpws = 'jou mysql wachtwoord'; //password
$mysqldb = 'jou database'; //welke database gebruiken we binnen de mysql server
?>
-----------db.php---------------
<?php
function DoQuery( $query ) //deze zielige alleenstaande functie in db.php wordt gebruikt om het verbinnden met de database in andere pagina wat te verkorten
{
global $mysqlhost, $mysqluser, $mysqlpws, $mysqldb; //gegevens uit config.php global maken anders kan ik ze hier niet gebruiken
$link = mysql_connect($mysqlhost, $mysqluser, $mysqlpws) //verbinding maken met de gegevens uit config.php
or die('Could not connect: ' . mysql_error()); //foutmelding geven bij niet kunnen connecten, dit moet misschien nog wat netter
mysql_select_db($mysqldb) or die('Could not select database'); //mysql database selecteren uit config.php
$result = mysql_query($query) or die('Query failed: ' . mysql_error()); // Perform SQL query
return $result; //resultaat terugsturen naar de vragende pagina
}
?>
Pagina 3
De database
CREATE TABLE merk ( merk_id int(2) NOT NULL auto_increment, merk varchar(25) NOT NULL default '', PRIMARY KEY (merk_id) ) TYPE=MyISAM;
# # zet de gegevens in tabel `merk` #
INSERT INTO merk VALUES (1, 'Opel'); INSERT INTO category VALUES (2, 'Ford'); INSERT INTO category VALUES (3, 'Nissan'); INSERT INTO category VALUES (4, 'Peugeot');
# -------------------------------------------------------- # # maak tabel `type` #
CREATE TABLE type ( type_id int(2) int(2) NOT NULL auto_increment,merk_id int(2) NOT NULL default '0', type varchar(25) NOT NULL default '', PRIMARY KEY (type_id) ) TYPE=MyISAM;
# # t de gegevens in tabel `type` #
INSERT INTO type VALUES (1, 1, 'Corsa'); INSERT INTO type VALUES (2, 1, 'Vectra'); INSERT INTO type VALUES (3, 1, 'Omega'); INSERT INTO type VALUES (4, 1, 'Astra'); INSERT INTO type VALUES (5, 2, 'Focus'); INSERT INTO type VALUES (6, 2, 'Escort'); INSERT INTO type VALUES (7, 2, 'Ka'); INSERT INTO type VALUES (8, 2, 'Fiesta'); INSERT INTO type VALUES (9, 3, 'Almera'); INSERT INTO type VALUES (10, 3, 'Bluebird'); INSERT INTO type VALUES (11, 3, 'Pathfinder'); INSERT INTO type VALUES (12, 3, 'Patrol'); INSERT INTO type VALUES (13, 4, '306'); INSERT INTO type VALUES (14, 4, '405'); INSERT INTO type VALUES (15, 4, '2007'); INSERT INTO type VALUES (16, 4, '205');
# # zet de gegevens in tabel `merk` #
INSERT INTO merk VALUES (1, 'Opel'); INSERT INTO category VALUES (2, 'Ford'); INSERT INTO category VALUES (3, 'Nissan'); INSERT INTO category VALUES (4, 'Peugeot');
# -------------------------------------------------------- # # maak tabel `type` #
CREATE TABLE type ( type_id int(2) int(2) NOT NULL auto_increment,merk_id int(2) NOT NULL default '0', type varchar(25) NOT NULL default '', PRIMARY KEY (type_id) ) TYPE=MyISAM;
# # t de gegevens in tabel `type` #
INSERT INTO type VALUES (1, 1, 'Corsa'); INSERT INTO type VALUES (2, 1, 'Vectra'); INSERT INTO type VALUES (3, 1, 'Omega'); INSERT INTO type VALUES (4, 1, 'Astra'); INSERT INTO type VALUES (5, 2, 'Focus'); INSERT INTO type VALUES (6, 2, 'Escort'); INSERT INTO type VALUES (7, 2, 'Ka'); INSERT INTO type VALUES (8, 2, 'Fiesta'); INSERT INTO type VALUES (9, 3, 'Almera'); INSERT INTO type VALUES (10, 3, 'Bluebird'); INSERT INTO type VALUES (11, 3, 'Pathfinder'); INSERT INTO type VALUES (12, 3, 'Patrol'); INSERT INTO type VALUES (13, 4, '306'); INSERT INTO type VALUES (14, 4, '405'); INSERT INTO type VALUES (15, 4, '2007'); INSERT INTO type VALUES (16, 4, '205');
Reacties
0