How to dynamically populate options on dropdown lists based on selection in another dropdown?

I have a table which has the information of a category, say a product. I have listed them in a dropdown menu. Now, what I need to do is, list the sub category of the selected category in a next dropdown menu. I hope, javascript is required, but I am not that familiar with javascript yet.

Would be much thankful for the help.

Solution 1:

You should use AJAX.

With jQuery it is very simple:

$('#select1').change(function(){
$.ajax({
   //Send to php script category id. This script returns all subcategories
   $.ajax({
      type: "POST",
      url: location.href,
      data: data,
      success : function (data)
      {   
         // Your return categories in data
         // Append list options to select2
      } 
});
});