How can I refresh a detail select list when my master select changes using AJAX

I'm looking for some pointers. I have one select list w开发者_高级运维ith a list of topics;

<select class="editor-select" id="TopicDescription" style="width: 99%">
  <option value="test1">test01</option>
  <option selected="selected" value="test2" >test02</option>
</select>

and another list of sub topics:

<select class="editor-select" id="SubTopicDescription" style="width: 99%">
  <option value="sub1">sub01</option>
  <option value="sub2">sub02</option>
</select>

When the first list value changes I would like to be able to refresh the second select list. The problem is I've no idea how to do this. I would like to use AJAX but is it possible? Any suggestions (starting point) for me would be much appreciated.

You will need to create a controller action that will take in a value from the first list and supply a list of options for the second list. Then you can make an ajax call using a Javascript framework such as JQuery:

$('#TopicDescription').change(function() {
  // make AJAX call to update the second select list
  $.ajax({
    url: "path/to/your/action",
    data: $('#TopicDescription').val(),
    success: function(data){
      // do something to your other dropdown
      // for example if your getting the data back to fill it with from your post method
      $('#SubTopicDescription').html(data); // you get the point
    }
  });
});

I asked a similar question and it got closed because it was a a duplicate of this apparently. Here is what I asked Using PHP/SQL - How can I click an item in a list to display another list of items assoicated to the clicked item I use a list of links rather than a drop down select.

Anyways I got it working with some help.

I have 2 tables. the "list" table (which has ID and listName fields) and a "listitems" table (which has id,itemName, and parent fields). When you click a list the items that have that list as a parent are displayed in another list next to it.

Here you go. It has deprecated functions and is sloppy but it wil do for now while I learn more. I'm still a beginner but if I get around to cleaning it up I will edit this.

    <?php
require ('./includes/connection.inc.php');

/* AJAX request */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && 
        strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
    $query = sprintf('SELECT * FROM listitems WHERE parent=%d',
            mysql_real_escape_string($_REQUEST['parent']));
    $listitems = mysql_query($query)
            or die(mysql_error()); 
    printf('<h3>List %d Items</h3>', $_REQUEST['parent']);
    while($info = mysql_fetch_array( $listitems )) 
    { 
        echo $info['itemName']."<br />";
    }
    exit;
}

/* Normal request */
?>

<div id="lists">
<h3>Lists</h3>
<?php      
$lists = mysql_query("SELECT * FROM lists") 
        or die(mysql_error());
while($info = mysql_fetch_array( $lists )) 
{   
echo '<a href="?parent='.$info['id'].'">'.$info['listName'].'</a><br />';
} 

?>      
</div>  

<div id='listitems'>
<?php 
    $query = sprintf('SELECT * FROM listitems WHERE parent=%d',
            mysql_real_escape_string($_REQUEST['parent']));
    $listitems = mysql_query($query)
            or die(mysql_error()); 
    printf('<h3>List %d Items</h3>', $_REQUEST['parent']);
    while($info = mysql_fetch_array( $listitems )) 
    { 
        echo $info['itemName']."<br />";
    }
?>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>jQuery(function($)){
$('#lists').delegate('a', 'click', function(e){
    e.preventDefault();
$('#listitems').load($(this).attr('href'))
  });
}
</script>