selectieboxen koppelen
Het bestaat uit meerder bestanden. allereerst natuurlijk het basisbestand index:
<form id="selecteren" name="selecteren" action="select.php" method="post">
Provincie:
<select id="drop_1" name="provincie">
<option value="" selected="selected" disabled="disabled">Kies een provincie... </option>';
Code (php)
1
2
3
2
3
<?php
Locatie();
?>
Locatie();
?>
<span id="wait_1" style="display: none;"></span>
<span id="result_1" style="display: none;"></span>
<span id="wait_2" style="display: none;"></span>
<span id="result_2" style="display: none;"></span>
<input type="submit" value="Zoek!" />
</form>
daarna de functies in func.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?php
//**************************************
// Page load dropdown results //
//**************************************
function Locatie()
{
$sql = 'SELECT id, naam FROM provincie ORDER BY naam';
$result = mysql_query($sql) or trigger_error( mysql_error() );
if (mysql_num_rows($result)>0){
while ($rij = mysql_fetch_array($result)) {
echo '<option value="'.$rij['id'].'">'.$rij['naam'].'</option>';
}
}
echo '</select>';
//**************************************
// First selection results //
//**************************************
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
drop_1($_GET['drop_var']);
}
}
function drop_1($drop_var)
{
include_once('db.php');
$sql = "SELECT id, plaats.naam FROM plaats ORDER BY plaats.naam WHERE provincie_id='$drop_var'";
$result = mysql_query($sql) or trigger_error( mysql_error() );
echo '<select name="stad" id="drop_2">
<option value=" " disabled="disabled" selected="selected">kies een plaats...</option>';
if (mysql_num_rows($result)>0){
while ($rij = mysql_fetch_array($result)) {
echo '<option value="'. $rij['id']. '">'. $rij['plaats.naam']. '</option>';
}}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get(\"func.php\", {
func: \"drop_2\",
drop_var: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
//**************************************
// Second selection results //
//**************************************
if($_GET['func'] == "drop_2" && isset($_GET['func'])) {
drop_2($_GET['drop_var']);
}
}
function drop_2($drop_var)
{
include_once('db.php');
$sql = "SELECT id, filiaal.naam FROM filiaal WHERE plaats_id='$drop_var' ORDER BY filiaal.naam";
$result = mysql_query($sql) or trigger_error( mysql_error() );
echo '<select name="filiaal" id="drop_3">
<option value=" " disabled="disabled" selected="selected">Kies een filiaal... </option>';
if (mysql_num_rows($result)>0){
while ($rij = mysql_fetch_array($result)) {
echo '<option value="'. $rij['id']. '">'. $rij['filiaal.naam']. '</option>';
}
}
echo '</select>';
}
?>
//**************************************
// Page load dropdown results //
//**************************************
function Locatie()
{
$sql = 'SELECT id, naam FROM provincie ORDER BY naam';
$result = mysql_query($sql) or trigger_error( mysql_error() );
if (mysql_num_rows($result)>0){
while ($rij = mysql_fetch_array($result)) {
echo '<option value="'.$rij['id'].'">'.$rij['naam'].'</option>';
}
}
echo '</select>';
//**************************************
// First selection results //
//**************************************
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
drop_1($_GET['drop_var']);
}
}
function drop_1($drop_var)
{
include_once('db.php');
$sql = "SELECT id, plaats.naam FROM plaats ORDER BY plaats.naam WHERE provincie_id='$drop_var'";
$result = mysql_query($sql) or trigger_error( mysql_error() );
echo '<select name="stad" id="drop_2">
<option value=" " disabled="disabled" selected="selected">kies een plaats...</option>';
if (mysql_num_rows($result)>0){
while ($rij = mysql_fetch_array($result)) {
echo '<option value="'. $rij['id']. '">'. $rij['plaats.naam']. '</option>';
}}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get(\"func.php\", {
func: \"drop_2\",
drop_var: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
//**************************************
// Second selection results //
//**************************************
if($_GET['func'] == "drop_2" && isset($_GET['func'])) {
drop_2($_GET['drop_var']);
}
}
function drop_2($drop_var)
{
include_once('db.php');
$sql = "SELECT id, filiaal.naam FROM filiaal WHERE plaats_id='$drop_var' ORDER BY filiaal.naam";
$result = mysql_query($sql) or trigger_error( mysql_error() );
echo '<select name="filiaal" id="drop_3">
<option value=" " disabled="disabled" selected="selected">Kies een filiaal... </option>';
if (mysql_num_rows($result)>0){
while ($rij = mysql_fetch_array($result)) {
echo '<option value="'. $rij['id']. '">'. $rij['filiaal.naam']. '</option>';
}
}
echo '</select>';
}
?>
en de header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
require("config.php");
$db = mysql_connect($dbhost, $dbuser, $dbpassword);
mysql_select_db($dbdatabase, $db);
setlocale(LC_ALL, 'nld_nld');
?>
require("config.php");
$db = mysql_connect($dbhost, $dbuser, $dbpassword);
mysql_select_db($dbdatabase, $db);
setlocale(LC_ALL, 'nld_nld');
?>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"><link/>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_three(id, response) {
$('#wait_2').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
<body>
<div id="container">
<div id="main">
en de footer:
</div> <!--main-->
</div><!--container-->
<div id="footer">© 2010 </div>
</body>
</html>
index.php
<html>
<head>
<title>Cars</title>
<script type="text/javascript">
function showCar(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcar.php?car="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="car" onchange="showCar(this.value)">
<option value=''>Select a car</option>
Code (php)
</select>
</form>
<br />
<div id="txtHint">Hier verschijnt een tweede selectie veld.</div>
</body>
</html>
getcar.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
$car=$_GET["car"];
//Hieronder normaal gesproken db connectie, db selectie, querie etc
//Mogelijke resultaten queries
$modellenAudi = array(A3, A4, A5);
$modellenVW = array(Golf, Scirocco, Tiguan);
//Mogelijke querie resultaten teruggeven in nieuwe selectielijst
echo '<select name = "carModel">
<option value = "">Select a model</option>';
if ($car == 'audi')
{
foreach ($modellenAudi as $modelAudi)
{
echo '<option value = '. $modelAudi .'>'. $modelAudi .'</option>';
}
}
elseif ($car == 'vw')
{
foreach ($modellenVW as $modelVW)
{
echo '<option value = '. $modelVW .'>'. $modelVW .'</option>';
}
}
echo '</select>';
?>
$car=$_GET["car"];
//Hieronder normaal gesproken db connectie, db selectie, querie etc
//Mogelijke resultaten queries
$modellenAudi = array(A3, A4, A5);
$modellenVW = array(Golf, Scirocco, Tiguan);
//Mogelijke querie resultaten teruggeven in nieuwe selectielijst
echo '<select name = "carModel">
<option value = "">Select a model</option>';
if ($car == 'audi')
{
foreach ($modellenAudi as $modelAudi)
{
echo '<option value = '. $modelAudi .'>'. $modelAudi .'</option>';
}
}
elseif ($car == 'vw')
{
foreach ($modellenVW as $modelVW)
{
echo '<option value = '. $modelVW .'>'. $modelVW .'</option>';
}
}
echo '</select>';
?>
Gewijzigd op 30/08/2010 10:19:34 door Tom Tom
Ik probeer een selectiebox "Klanten" / "Leveranciers" te maken, afhankelijk van welke radiobutton wordt geklikt. So far so good.
Vervolgens wil ik nu de contactpersonen bij het gekozen bedrijf (een leverancier of klant staan in een aparte tabel, de bijbehorende contactpersonen idem.) weergeven in een tweede selectiebox.
Kort samengevat: Radiobutton (Klant of Leverancier) > Dynamische selectiebox (Bedrijven) > Dynamische selectiebox (Contactpersonen)
Simpel gedacht, heb ik geprobeerd om het onchange event toe te voegen aan de eerste selectiebox die ik creeer, maar dit lijkt niet te werken!? Iemand tips? Ik zoek me suf naar een werkend voorbeeld.
Gewijzigd op 22/11/2010 20:49:24 door Marco V