Question

I have two database tables, grouptypes and groups. A grouptype can have multiple groups, but a group only belongs to one grouptype. I have two select tags, one is grouptypes and another one is groups.

What I want to do is that whenever a user selects a grouptype in the grouptypes dropdown menu, it triggers a handler to retrieve the corresponding groups that belong to that grouptype, and pass it to the second select dropdown list.

I have the code as follows. It has not been completed and there are some errors. Can anyone help?

  <?php
    $result = $_POST['grouptype'];
    echo $result;
  ?>

  GroupType: <select id="groupTypes">

    <?php foreach($grouptypes as $type) : ?>

    <?php echo "<option value='" . $type->name . "'>" .$type->name. "</option>"; ?>

    <?php endforeach ?>

  </select><br />

  <br />
  Group: <select id="groups">
    <?php $count = 0; ?>
    <?php foreach($groups as $group) : ?>
    <?php $count++; ?>
    <?php echo "<option value='" . $group->name . "'>" .$group->name. "</option>"; ?>

    <?php endforeach ?>

  </select><br />



  <script type="text/javascript">

    $('#groupTypes').change(function(){

      var grouptype = $('#groupTypes').val();
      $.post("GroupModificationSuccess.php", {grouptype: grouptype});
    });

  </script>

Answer 1

This should work, might need some tweaks

$(function(){


var GType  = $("select#groupTypes"),
    GGroup = $("select#groups").hide(),
    GData  = [];

GType.bind('change', function(){

    //grab the value of the option currently selected
    var optselected = $(this).find("option:selected").val();
    if(optselected)
    {
     //send post data and request a callback
     $.post("GroupModificationSuccess.php", {'grouptype' : optselected}
     , function(callback)
           {
                 if(callback)
                 {
                     GData.push(callback.data);  
                 }
           });
     }

     //loop data send back via callback and build options
     $.each(GData, function(key, val))
     {
         var opts = '';
         opts += '<option value='+ key + '>' + value + '</option>'      
     }
     //append options to Group select and show it
     GGroup.append(opts).show().fadeIn('slow');
});

});