如何使用Javascript或Jquery切换选择元素？

Question

I don't know much about Javascript and Jquery, but I do have to use it on a HTML select tags. 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 select a grouptype in the grouptypes dropdown menu, it triggers a handler to retrieve the corresponding groups that belong to that grouptype. I need javascript or Jquery to get it done, but I am not able to write it myself. So anyone can help me? I would so appreciate it.

 GroupType: <select name="groupType">

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

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

    <?php endforeach ?>

  </select><br />


  Group: <select name="groups">

    <?php foreach($groups as $group) : ?>

    <?php echo "<option value='" . $group['name'] . "'>" .$group['name']. "</option>"; ?>

    <?php endforeach ?>

  </select><br />


  <?php 
    $query = "SELECT id, name FROM group_type";

    $grouptypes = $_db->getResultsForquery($query);


    $query = "SELECT id, name FROM groups";

    $groups = $_db->getResultsForquery($query);


  ?>

Answer 1

Here's what I would do. It uses jquery to send a get to a page called groups.php which will return some html you can parse. Then you parse it :)

$('#grouptype-select').change(function(){  //.change will detect when the select has been changed (an -option- has been chosen)
    var grouptype = $(this).val();   //create a variable from the -option- chosen
    $.get('groups.php', 'grouptype=' + grouptype, function(response){    //use jquery to send -get- to groups.php
        $('#list-of-groups').html(response);    //insert response into ur doc
    }
});

Something like http://www.yoursite.com?grouptype=abc will be sent using get asynchronously (ajax) Good luck!

PS Here is a jsfiddle to get you tinkering: http://jsfiddle.net/yLyTw/1/