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:
...
<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:
<?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);
?>
Javascript code:
<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>
Hulp graag!
