javascript - multiple dependent/cascading/chained select boxes on same form
- by Aaron
I'm populating select box options via jquery and json but I'm not sure how to address multiple instances of the same chained select boxes within my form.
Because the select boxes are only rendered when needed some records will have ten sets of chained select boxes and others will only need one. How does one generate unique selects to support the auto population of secondary select options?
Here's the code I'm using, and I thank you in advance for any insight you may provide.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function populateACD() {
$.getJSON('/acd/acd2json.php', {acdSelect:$('#acdSelect').val()},
function(data) {
var select = $('#acd2');
var options = select.attr('options');
$('option', select).remove();
$.each(data, function(index, array) {
options[options.length] = new Option(array['ACD2']);
});
});
}
$(document).ready(function() {
populateACD();
$('#acdSelect').change(function() {
populateACD();
});
});
</script>
<?php
require_once('connectvars.php');
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
$squery = "SELECT ACD1ID, ACD1 from ACD1";
$sdata = mysqli_query($dbc, $squery);
// Loop through the array of ACD1s, placing them into an option of a select
echo '<select name="acdSelect" id="acdSelect">';
while ($row = mysqli_fetch_array($sdata)) {
echo "<option value=" . $row['ACD1ID'] . ">" . $row['ACD1'] . "</option>\n";
}
echo '</select><br /><br />';
<select name="acd2" id="acd2">
</select>
acd2json.php
<?php
$dsn = "mysql:host=localhost;dbname=wfn";
$user = "acd";
$pass = "***************";
$pdo = new PDO($dsn, $user, $pass);
$rows = array();
if(isset($_GET['acdSelect'])) {
$stmt = $pdo->prepare("SELECT ACD2 FROM ACD2 WHERE ACD1ID = ? ORDER BY ACD2");
$stmt->execute(array($_GET['acdSelect']));
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>
