javascript - multiple dependent/cascading/chained select boxes on same form

Question

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);
?>

Answer 1

If you give each "select" (well, each one that you need to control) a "class" name that identifies them as such, then you can set up a handler for changes to all of them like this:

$('select.controlMe').click(function() {
  // ... whatever
});

Your select elements would look like this:

<select name='paramName' class='controlMe'>

Now, if the <select> elements need to have specific relationships to other <select> elements, then you'll have to have a way of describing that. You could use the "metadata" jQuery plugin so that the select elements themselves could be annotated (again, in the "class" value) and the Javascript event handler could just look at that. I'm not exactly sure what it is that your code does, however.

The metadata plugin is here: http://plugins.jquery.com/project/metadata