Dropdown vullen, aanpassen,...
Eerst kies je een land. Dan gaat hij de locaties zoeken in dat land, en dan de plaats dat bij de locatie hoort.
Mijn vragen:
1. Als ik alle dropdown-boxen vul en daarna weer een ander land kies, veranderd de waarde van de plaats niet. Deze blijft gevuld :(
Ergens moet 'removeAllOptions' en 'addOption' + onchange voor id="plaats"...
2. Zoals je kan zien moet ik nu voor elk land en elke locatie een stukje zelf schrijven. Ik raak er maar niet uit om dit met php op te lossen.
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<?php
include("../connect.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
function fillForm()
{
<?php
$sqlLand = "SELECT DISTINCT land FROM tbl_plaatsen ORDER BY land";
if($rLand = mysql_query($sqlLand))
{
$aLand = array();
while($row = mysql_fetch_assoc($rLand))
{
$aLand[]=$row['land'];
}
}
foreach($aLand as $sLand)
{
echo 'addOption(document.dropdown.Land, "'.$sLand.'", "'.$sLand.'", "");';
}
?>
}
function SelectLocatie()
{
removeAllOptions(document.dropdown.Locatie);
addOption(document.dropdown.Locatie, "", "Locatie", "");
if(document.dropdown.Land.value == 'Belgie')
{
<?php
$sqlLocatie = "SELECT DISTINCT locatie FROM tbl_plaatsen WHERE land = 'Belgie' ORDER BY locatie";
if($result = mysql_query($sqlLocatie))
{
$array = array();
while($row = mysql_fetch_assoc($result))
{
$array[]=$row['locatie'];
}
}
foreach($array as $sProvincie)
{
echo 'addOption(document.dropdown.Locatie, "'.$sProvincie.'", "'.$sProvincie.'", "");';
}
?>
}
if(document.dropdown.Land.value == 'Nederland')
{
<?php
$sqlLocatie = "SELECT DISTINCT locatie FROM tbl_plaatsen WHERE land = 'Nederland' ORDER BY locatie";
if($result = mysql_query($sqlLocatie))
{
$array = array();
while($row = mysql_fetch_assoc($result))
{
$array[]=$row['locatie'];
}
}
foreach($array as $sProvincie)
{
echo 'addOption(document.dropdown.Locatie, "'.$sProvincie.'", "'.$sProvincie.'", "");';
}
?>
}
}
function SelectPlaats()
{
removeAllOptions(document.dropdown.Plaats);
addOption(document.dropdown.Plaats, "", "Plaats", "");
if(document.dropdown.Locatie.value == 'Vlaanderen')
{
<?php
$sqlPlaats = "SELECT DISTINCT Plaats FROM tbl_plaatsen WHERE Locatie = 'Vlaanderen' ORDER BY Plaats";
if($result = mysql_query($sqlPlaats))
{
$array = array();
while($row = mysql_fetch_assoc($result))
{
$array[]=$row['Plaats'];
}
}
foreach($array as $sPlaats)
{
echo 'addOption(document.dropdown.Plaats, "'.$sPlaats.'", "'.$sPlaats.'", "");';
}
?>
}
if(document.dropdown.Locatie.value == 'Wallonie')
{
<?php
$sqlPlaats = "SELECT DISTINCT Plaats FROM tbl_plaatsen WHERE Locatie = 'Wallonie' ORDER BY Plaats";
if($result = mysql_query($sqlPlaats))
{
$array = array();
while($row = mysql_fetch_assoc($result))
{
$array[]=$row['Plaats'];
}
}
foreach($array as $sPlaats)
{
echo 'addOption(document.dropdown.Plaats, "'.$sPlaats.'", "'.$sPlaats.'", "");';
}
?>
}
if(document.dropdown.Locatie.value == 'Zeeland')
{
<?php
$sqlPlaats = "SELECT DISTINCT Plaats FROM tbl_plaatsen WHERE Locatie = 'Zeeland' ORDER BY Plaats";
if($result = mysql_query($sqlPlaats))
{
$array = array();
while($row = mysql_fetch_assoc($result))
{
$array[]=$row['Plaats'];
}
}
foreach($array as $sPlaats)
{
echo 'addOption(document.dropdown.Plaats, "'.$sPlaats.'", "'.$sPlaats.'", "");';
}
?>
}
}
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}
function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
</script>
</head>
<body onload="fillForm();">
<br>
<form name="dropdown" action="" method="post" >
<select name="Land" onchange="SelectLocatie();" >
<option value="">Land</option>
</select>
<br>
<select id="Locatie" name="Locatie" onchange="SelectPlaats();">
<option value="">Locatie</option>
</select>
<br>
<select id="Plaats" name="Plaats">
<option value="">Plaats</option>
</select>
</form>
</body>
</html>
<?php
echo 'Einde';
?>
include("../connect.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
function fillForm()
{
<?php
$sqlLand = "SELECT DISTINCT land FROM tbl_plaatsen ORDER BY land";
if($rLand = mysql_query($sqlLand))
{
$aLand = array();
while($row = mysql_fetch_assoc($rLand))
{
$aLand[]=$row['land'];
}
}
foreach($aLand as $sLand)
{
echo 'addOption(document.dropdown.Land, "'.$sLand.'", "'.$sLand.'", "");';
}
?>
}
function SelectLocatie()
{
removeAllOptions(document.dropdown.Locatie);
addOption(document.dropdown.Locatie, "", "Locatie", "");
if(document.dropdown.Land.value == 'Belgie')
{
<?php
$sqlLocatie = "SELECT DISTINCT locatie FROM tbl_plaatsen WHERE land = 'Belgie' ORDER BY locatie";
if($result = mysql_query($sqlLocatie))
{
$array = array();
while($row = mysql_fetch_assoc($result))
{
$array[]=$row['locatie'];
}
}
foreach($array as $sProvincie)
{
echo 'addOption(document.dropdown.Locatie, "'.$sProvincie.'", "'.$sProvincie.'", "");';
}
?>
}
if(document.dropdown.Land.value == 'Nederland')
{
<?php
$sqlLocatie = "SELECT DISTINCT locatie FROM tbl_plaatsen WHERE land = 'Nederland' ORDER BY locatie";
if($result = mysql_query($sqlLocatie))
{
$array = array();
while($row = mysql_fetch_assoc($result))
{
$array[]=$row['locatie'];
}
}
foreach($array as $sProvincie)
{
echo 'addOption(document.dropdown.Locatie, "'.$sProvincie.'", "'.$sProvincie.'", "");';
}
?>
}
}
function SelectPlaats()
{
removeAllOptions(document.dropdown.Plaats);
addOption(document.dropdown.Plaats, "", "Plaats", "");
if(document.dropdown.Locatie.value == 'Vlaanderen')
{
<?php
$sqlPlaats = "SELECT DISTINCT Plaats FROM tbl_plaatsen WHERE Locatie = 'Vlaanderen' ORDER BY Plaats";
if($result = mysql_query($sqlPlaats))
{
$array = array();
while($row = mysql_fetch_assoc($result))
{
$array[]=$row['Plaats'];
}
}
foreach($array as $sPlaats)
{
echo 'addOption(document.dropdown.Plaats, "'.$sPlaats.'", "'.$sPlaats.'", "");';
}
?>
}
if(document.dropdown.Locatie.value == 'Wallonie')
{
<?php
$sqlPlaats = "SELECT DISTINCT Plaats FROM tbl_plaatsen WHERE Locatie = 'Wallonie' ORDER BY Plaats";
if($result = mysql_query($sqlPlaats))
{
$array = array();
while($row = mysql_fetch_assoc($result))
{
$array[]=$row['Plaats'];
}
}
foreach($array as $sPlaats)
{
echo 'addOption(document.dropdown.Plaats, "'.$sPlaats.'", "'.$sPlaats.'", "");';
}
?>
}
if(document.dropdown.Locatie.value == 'Zeeland')
{
<?php
$sqlPlaats = "SELECT DISTINCT Plaats FROM tbl_plaatsen WHERE Locatie = 'Zeeland' ORDER BY Plaats";
if($result = mysql_query($sqlPlaats))
{
$array = array();
while($row = mysql_fetch_assoc($result))
{
$array[]=$row['Plaats'];
}
}
foreach($array as $sPlaats)
{
echo 'addOption(document.dropdown.Plaats, "'.$sPlaats.'", "'.$sPlaats.'", "");';
}
?>
}
}
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}
function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
</script>
</head>
<body onload="fillForm();">
<br>
<form name="dropdown" action="" method="post" >
<select name="Land" onchange="SelectLocatie();" >
<option value="">Land</option>
</select>
<br>
<select id="Locatie" name="Locatie" onchange="SelectPlaats();">
<option value="">Locatie</option>
</select>
<br>
<select id="Plaats" name="Plaats">
<option value="">Plaats</option>
</select>
</form>
</body>
</html>
<?php
echo 'Einde';
?>
Dat zou je het beste in javascript/AJAX oplossen
Door een andere structuur ofzo?
Ik ben niet zo goed in Java en met AJAX nog nooit gewerkt.
Bedankt
Toevoeging op 26/11/2011 16:07:36:
1ste vraag opgelost
Bij function SelectLocatie() heb ik de regels erbij gezet
removeAllOptions(document.dropdown.Plaats);
addOption(document.dropdown.Plaats, "", "Plaats", "");
Iemand nog een idee voor mijn 2de vraag?
Gewijzigd op 26/11/2011 16:07:52 door PH Piet
php is een server side script, terwijl het aanpassen van dropdowns een client side aangelegenheid is. Alleen met php oplossen is dus alleen mogelijk als je de pagina herlaadt bij elke dropdown verandering.... lijkt me niet dat je dat wil. Wil je het elegant oplossen aan de client side dan heb je in elk geval een stukje javascript nodig (geen java). AJAX is handig als de content van je dropdowns variabel is (bijvoorbeeld afhankelijk van gegevens uit een database). Als de data vast is en niet heel erg veel zou je het in principe ook op kunnen lossen door een aantal arrays te definieren met de gegevens in het document zelf die je dan (middels javascript) gebruikt om in een dropdown te laden.