Question

I’m trying to chain two select drop-downs with the onclick event but with little success. This is what I’ve managed to achieve so far.

This is my code so far:

form.php

$("#dept").click(function () {
    var dept = $("#dept").val();
    var dataString = 'dept=' + dept
    $.ajax({
        type: "POST",
        url: "process.php",
        data: dataString,
        cache: false,
        success: function (html) {
           $('select.moduleCode').html();
        }
    });
});

Department    
<select name="dept" id="dept">
<option value="<?php echo $loggedin_id; ?>">
<?php echo $_SESSION[$thename]; ?></option>
<option>---------------------------------</option>
<?php
$sql = "SELECT * FROM ts_dept WHERE id<>:id";
$stm = $pdo->prepare( $sql );
$stm->execute( array( ':id' => $loggedin_id ) );
$rows = $stm->fetchAll();
foreach ($rows as $row) 
{
  echo '<option value="'.$row['id'].'">
  '.$row['dept'].'
  </option>';
};
?>
</select>

<p>

Module Code
<select name="moduleCode" id="moduleCode">
<option>---------------------------------</option>
</select>

process.php

<?php
require_once("../resources/php/connection.php");

$dept_id = $_POST["dept"];

$sql = "SELECT id FROM ts_module WHERE id=:id";
$stm = $pdo->prepare( $sql );
$stm->execute( array( ':id' => $dept_id ) );
$rows = $stm->fetchAll();
foreach ($rows as $row) 
{
    echo '<option>'.$row['id'].'</option>';
}
?>

I am trying to fill the option‘s of the moduleCode drop down with values based on the selection made in the dept dropdown (this event should be initiated on page load as well. But despite the user making a selection in the dept drop down, nothing is refreshed in the moduleCode dropdown. What changes do I need to make to my code to sort this problem out?

Answer 1

Your ajax call doesn’t do anything with the response from your php, try:

$.ajax({
    type: "POST",
    url: "process.php",
    data: dataString,
    cache: false,
    success: function (html) {
       $('#moduleCode').html(html);
    }
});

I would also change $("#dept").click( with $("#dept").change( so it will work for users without a mouse, and so it only loads the new data when it changes, not just when clicked on.