populating dropdown using jquery

populating dropdown using jquery

Hi, I am new to jquery. I am trying to populate second drop down based on the value selected on first drop down. I am able to implement up to this point. The form have a continue button. If the user click continue button next page is loaded which have a back button. If the user clicks on back button previously selected values should be automatically selected. I am able to re-select first drop down but second drop down is not getting populated as it is happening on change event of first drop down. Can you please tell me how to modify my code to achieve this.

HTML CODE
  2. <?php 
  3. require_once('../includes/initialize.php');
  4. if (isset($_SERVER['HTTP_REFERER'])){
  5. $source = $_SERVER['HTTP_REFERER'];
  6. preg_match("/http(.*)?\/(.*)/", $source, $matches);
  7. }
  8. if (isset($_POST['submit'])){
  9. $registeration = $_SESSION['registration'];
  10. $registeration['company_category'] = trim($_POST['category']);
  11. $registeration['company_subcategory'] = trim($_POST['subcategory']);
  12. $_SESSION['registration'] = $registeration;
  13. redirect_to('register_step3.php');
  14. }
  15. $company_cats = Companycategory::find_all();
  16. ?>
  17. <!doctype html>
  18. <html>
  19. <head>
  20. <meta charset="utf-8">
  21. <title>Untitled Document</title>
  22. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  23. <script>
  24. $(document).ready(function() {
  25.     $("#category").change(function () {   
  26.       var category_id = $(this).val();
  27.        $.ajax({
  28.             type: "POST", 
  29.             url: "../includes/get_company_subcategory_ajax.php?category=" + category_id, 
  30.             dataType: "json",
  31.             success: function(data){
  32.                 //Clear options corresponding to earlier option of first dropdown
  33.                 $('select#subcategory').empty(); 
  34.                 $('select#subcategory').append('<option value="0">Select Option</option>');
  35.                 //Populate options of the second dropdown
  36.                 $.each( data, function(i, val){    
  37.                     $('select#subcategory').append('<option value="'+ val.id +'">'+ val.subcategory +'</option>');
  38.                 });
  39.                 $('select#subcategory').focus();
  40.             },
  41.             beforeSend: function(){
  42.                 $('select#subcategory').empty();
  43.                 $('select#subcategory').append('<option value="0">Loading...</option>');
  44.             },
  45.             error: function(){
  46.                 $('select#subcategory').attr('disabled', true);
  47.                 $('select#subcategory').empty();
  48.                 $('select#subcategory').append('<option value="0">No Options</option>');
  49.             }
  50.         })  
  51.     }); 
  52. });
  53. </script>
  54. </head>
  55. <body>
  56. <h1>Add Your Business</h1>
  57. <form action="register_step2.php" method="post" name="register_step2">
  58.   <table border="0" cellspacing="0" cellpadding="0" width="690">
  59.     <tr>
  60.       <td colspan="2"><p><strong>Search Category</strong></p></td>
  61.     </tr>
  62.     <tr>
  63.     </tr>
  64.     <tr>
  65.       <td>Category:</td>
  66.       <td>
  67.         <select name="category" id="category">
  68.         <option value="0">Select Option</option>
  69.           <?php foreach($company_cats as $company_cat) {?> 
  70.             <option value="<?php echo $company_cat->id;?>"<?php if(isset($_SESSION['registration']['company_category']) && isset($matches[2]) && $matches[2]!="" && $company_cat->id==$_SESSION['registration']['company_category']){echo('selected');}?>><?php echo $company_cat->category;?></option>  
  71.             <?php } ?>  
  72.           </select>
  73.       </td>
  74.     </tr>
  75.     <tr>
  76.       <td>SubCategory:</td>
  77.       <td>
  78.           <select name="subcategory" id="subcategory">
  79.         </select>
  80.      </td>
  81.     </tr>
  82.   </table>
  83.   <p>
  84.     <input type="button" name="button" id="button" value="Back" onClick="window.location = 'register.php';">
  85.     <input type="submit" name="submit" id="submit" value="Continue">
  86.   </p>
  87. </form>
  88. </body>
  89. </html>