Dropdown vullen vanuit database
Ik heb een dropdownmenu en als ik daarin een van de waarden aanklik moet de volgende dropdown gevuld worden met waarden uit een database waarvan het type_id overeenkomt met de waarde uit het eerste menu.
Nu heb ik dit script geprobeerd: http://www.electrictoolbox.com/json-data-jquery-php-mysql/
Precies wat ik nodig heb, maar ik krijg het maar niet aan de praat.
Formulier:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
<tr>
<td>Type instituut:</td>
<td><select name="type" id="instellingType" onchange="getInstituut(this.value)">
<option value="----">Maak een keuze</option>
<option value="2">MBO</option>
<option value="3">HBO</option>
<option value="4">Universiteit</option>
</select></td>
<td class="aanmeldenUitleg">Kies het type van je instituut</td>
</tr>
<tr>
<td>Instituut:</td>
<td><select name="instelling_id" id="instellingID"></select></td>
<td class="aanmeldenUitleg">Kies de naam van je instituut</td>
</tr>
..
<tr>
<td>Type instituut:</td>
<td><select name="type" id="instellingType" onchange="getInstituut(this.value)">
<option value="----">Maak een keuze</option>
<option value="2">MBO</option>
<option value="3">HBO</option>
<option value="4">Universiteit</option>
</select></td>
<td class="aanmeldenUitleg">Kies het type van je instituut</td>
</tr>
<tr>
<td>Instituut:</td>
<td><select name="instelling_id" id="instellingID"></select></td>
<td class="aanmeldenUitleg">Kies de naam van je instituut</td>
</tr>
..
Verwerk code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
$dsn = "mysql:host=XXXX;dbname=XXXX";
$username = "XXXX";
$password = "XXXX";
$pdo = new PDO($dsn, $username, $password);
$rows = array();
if(isset($_GET['instellingType'])) {
$stmt = $pdo->prepare("SELECT DISTINCT(naam) as naam FROM instellingen WHERE type = ? ORDER BY naam ASC");
$stmt->execute(array($_GET['instellingType']));
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>
$dsn = "mysql:host=XXXX;dbname=XXXX";
$username = "XXXX";
$password = "XXXX";
$pdo = new PDO($dsn, $username, $password);
$rows = array();
if(isset($_GET['instellingType'])) {
$stmt = $pdo->prepare("SELECT DISTINCT(naam) as naam FROM instellingen WHERE type = ? ORDER BY naam ASC");
$stmt->execute(array($_GET['instellingType']));
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>
Javascript code:
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
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
<script type="text/javascript">
function getInstituut() {
$.getJSON('/get_instellingen.php', {instellingType:$('#instellingType').val()}, function(data) {
var select = $('#instellingID');
var options = select.attr('options');
$('option', select).remove();
$.each(data, function(index, array) {
options[options.length] = new Option(array['naam']);
});
});
}
$(document).ready(function() {
getInstituut();
$('#instellingType').change(function() {
getInstituut();
});
});
</script>
function getInstituut() {
$.getJSON('/get_instellingen.php', {instellingType:$('#instellingType').val()}, function(data) {
var select = $('#instellingID');
var options = select.attr('options');
$('option', select).remove();
$.each(data, function(index, array) {
options[options.length] = new Option(array['naam']);
});
});
}
$(document).ready(function() {
getInstituut();
$('#instellingType').change(function() {
getInstituut();
});
});
</script>
Hulp graag!
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
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
function dual_linked_select(
$table, // Table to create linked selects from
$table_column_01, // Root category
$table_column_02, // Subcategory of the root category
$group_02_default_option_text // Default option text for the group 2 select
)
{
// Define globals
global $javascript;
global $group_01_options;
// Define variables
$javascript = null; // Hold
$group_01_options = null;//Hold
$javascript .=<<<content
function DefaultGroup2()
{
var x = document.getElementById("Group2");
x.length = 0;
VarGroup2 = document.getElementById("Group2");
VarGroup2.options[VarGroup2.options.length] = new Option("$group_02_default_option_text","");
document.getElementById("Group2").disabled = true;
}
function CheckGroup1Select()
{
// If no Group1 is selected clear the Group2 and set to default
if(document.getElementById("Group1").value == "")
{
// Clear the Group2 select and set to default value
DefaultGroup2();
}
content;
// Javascript
$group_01_query = "SELECT ".$table_column_01." FROM ".$table." GROUP BY ".$table_column_01;
$group_01_result = mysql_query($group_01_query) or die(mysql_error());
while($group_01 = mysql_fetch_array($group_01_result))
{
$group_01_options .= '<option value="'.$group_01[$table_column_01].'">'.$group_01[$table_column_01].'</option>'."\r\n";
$javascript .=<<<content
else if(document.getElementById("Group1").value == "$group_01[$table_column_01]")
{
// Clear the Group2 and set to default value
DefaultGroup2();
// Set variable options for Group2 select
VarGroup2 = document.getElementById("Group2");
content;
$group_02_query = "SELECT ".$table_column_02." FROM ".$table." WHERE ".$table_column_01." = '".$group_01[$table_column_01]."' GROUP BY ".$table_column_02;
$group_02_result = mysql_query($group_02_query) or die(mysql_error());
while($group_02 = mysql_fetch_array($group_02_result))
{
$javascript .=' VarGroup2.options[VarGroup2.options.length] = new Option("'.$group_02[$table_column_02].'","'.$group_02[$table_column_02].'");'."\r\n";
}
$javascript .=<<<content
document.getElementById("Group2").disabled = false;
}
content;
}
$javascript .=' }'."\r\n";
} // End of dual_linked_selects function
?>
$table, // Table to create linked selects from
$table_column_01, // Root category
$table_column_02, // Subcategory of the root category
$group_02_default_option_text // Default option text for the group 2 select
)
{
// Define globals
global $javascript;
global $group_01_options;
// Define variables
$javascript = null; // Hold
$group_01_options = null;//Hold
$javascript .=<<<content
function DefaultGroup2()
{
var x = document.getElementById("Group2");
x.length = 0;
VarGroup2 = document.getElementById("Group2");
VarGroup2.options[VarGroup2.options.length] = new Option("$group_02_default_option_text","");
document.getElementById("Group2").disabled = true;
}
function CheckGroup1Select()
{
// If no Group1 is selected clear the Group2 and set to default
if(document.getElementById("Group1").value == "")
{
// Clear the Group2 select and set to default value
DefaultGroup2();
}
content;
// Javascript
$group_01_query = "SELECT ".$table_column_01." FROM ".$table." GROUP BY ".$table_column_01;
$group_01_result = mysql_query($group_01_query) or die(mysql_error());
while($group_01 = mysql_fetch_array($group_01_result))
{
$group_01_options .= '<option value="'.$group_01[$table_column_01].'">'.$group_01[$table_column_01].'</option>'."\r\n";
$javascript .=<<<content
else if(document.getElementById("Group1").value == "$group_01[$table_column_01]")
{
// Clear the Group2 and set to default value
DefaultGroup2();
// Set variable options for Group2 select
VarGroup2 = document.getElementById("Group2");
content;
$group_02_query = "SELECT ".$table_column_02." FROM ".$table." WHERE ".$table_column_01." = '".$group_01[$table_column_01]."' GROUP BY ".$table_column_02;
$group_02_result = mysql_query($group_02_query) or die(mysql_error());
while($group_02 = mysql_fetch_array($group_02_result))
{
$javascript .=' VarGroup2.options[VarGroup2.options.length] = new Option("'.$group_02[$table_column_02].'","'.$group_02[$table_column_02].'");'."\r\n";
}
$javascript .=<<<content
document.getElementById("Group2").disabled = false;
}
content;
}
$javascript .=' }'."\r\n";
} // End of dual_linked_selects function
?>
Code (php)
1
2
3
4
2
3
4
<?
// execute dual_linked_selects_function
dual_linked_select('regios','Provincie','Gemeente','Gemeente');
?>
// execute dual_linked_selects_function
dual_linked_select('regios','Provincie','Gemeente','Gemeente');
?>
Code (php)
1
2
3
4
5
2
3
4
5
<select id="Group1" name="group1" onChange="CheckGroup1Select(this);">
<option value="">Provincie</option>
<? echo $group_01_options; ?>
</select>
<select id="Group2" name="group2"><option value="">Gemeente</option></select>
<option value="">Provincie</option>
<? echo $group_01_options; ?>
</select>
<select id="Group2" name="group2"><option value="">Gemeente</option></select>
hier een voorbeeldje hoe ik een dropdown vul van uit database weet niet of een goede manier is maar in ieder geval werkt dit
Gewijzigd op 16/03/2011 19:23:12 door matthias deckers
Dit heb ik:
Code (php)
1
2
3
4
2
3
4
<select name="type">
<option value="1">1</option>
<option value="2">2</option>
</select>
<option value="1">1</option>
<option value="2">2</option>
</select>
Als men 1 selecteert wil ik in het 2e dropdown
alles weergeven uit MySQL query waarbij type=1
En bij 2, type=2
Er zijn twee mogelijkheden om dit voor elkaar te krijgen.
1:
Je selecteer alle data uit de database en zet een div met alle informatie daarin. Als classname van de div zet je de value van de dropdown box met eventueel een prefix.
Standaard zet je 'alle' divs op display none. Zodra je iets selecteert laat je de desbetreffende div tonen.
2:
Aan de hand van de geselecteerde value uit de drop downbox een ajax call.
Dit kan je weer splitsen in jQuery.getJson({}); of $.Ajax({})
Over je code:
Wat geeft de json_encode? En is de javascript:data leeg? Kijk anders even in firebug hoe ofwat (omtrent de ajax / json call)
Overigens: $(document).ready(function() {} is uit 19 noach.. $(function() {{); is van deze tijd.
Volg je het?
Thnx. Eerste optie lijkt me de makkelijkste, maar niet de meest nette.
Over mijn code, json_encode geeft gewoon alle waarden in de vorm [{"naam":"XXX"},... enz