Using Javascript and Json to pass select option value to PHP and retrieve data from database

Question

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 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.

I have the code as follows and it is not correct and complete. All of the code is included in the same PHP file GroupModificationSuccess.php(Is it a problem?). It is supposed to get the value of 'grouptypes' and echo 'true', but it echo 'false'. It means the value doesn't pass correctly. Anyone can help me to take a look and tell me the right way to do that? thanks

<?php
    $rows = array();

    if(isset($_GET['grouptypes'])){
        echo 'true';
    }else{
        echo 'false';
    }
?>

<script type="text/javascript">
    function populateFruitVariety() {
        $.getJSON("url_for('GroupModificationSuccess')", {grouptypes:$('#grouptypes').val()}, function(data) {
            var select = $('#groups');
            var options = select.attr('options');
            $('option', select).remove();
            $.each(data, function(index, array) {
                options[options.length] = new Option(array['group']);
            });
        });
    }

    $(document).ready(function() {
        populateFruitVariety();
        $('#grouptypes').change(function() {
            populateFruitVariety();
        });
    });
</script>

GroupType: 
<select id="grouptypes">
    <?php foreach($grouptypes as $type) : ?>
    <?php echo "<option value='" . $type->name . "'>" .$type->name. "</option>"; ?>
    <?php endforeach ?>
</select>
<br />
<br />
Result:
<span id="list-of-groups"></span>
<br />
Group:
<select name="group" 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 />

Answer 1

My tip is to debug your code by using firebug/a simular web developer tool to output messages to the console by using the javascript function console.log. Just pass the string/object to output it to the console.

For example try to ouput the options variable. My guess is that it is empty since you re using the attr function. Instead try the child function and that might help you on the way.