Return Array Results to Dependent Select Boxes in TWIG Template

[4xjbh]

I am trying to update the second select box 'subcategory_id'  but I don't know how to return the query values back to the control/twig template. All of the examples I have seen echo back html from a option while loop.

 

Should I be echo back the html as per other common examples or is there a more twig compliant way to do this, maybe returning an array variable.

 

Thanks in advance, James

catalogues.php
  
<script>
$('#category_id').change( function() {
    checkCategory();   // checks value and enables/disables subcategory control 
    var catid = $(this).val();
    var dataString = 'catid='+catid;
    $.ajax ({
    type: "POST",
    url: "catalogues.php",
    data: dataString,
    cache: false,
    success: function() {
       $("#subcategory_id")..........;   // ?????
      }
    }) 
  }); 

</script>

<?php

if(isset($_POST['catid'] )) {

  $catid=$_POST['catid'];
  $sql_subcategory = "SELECT
                  catalogues_categories.id,
                  catalogues_categories.category,
                  catalogues_categories.parent_id,
                  catalogues_categories.inuse
                  FROM
                  catalogues_categories
                  WHERE
                  catalogues_categories.parent_id = {$catid} AND
                  catalogues_categories.inuse = 1
                  ORDER BY
                  catalogues_categories.category ASC";

  $query_subcategory = $conn->query($sql_subcategory);
  $results_subcategory = $query_subcategory->fetchAll();
} else {
  $results_subcategory = null;
  }

?>

[ignace]

The result you return is passed to the success function.

 

success: function(data) {
  var el = document.getElementById('subcategory_id');
  
  $(el).empty(); // remove all HTML inside <select/>
  $.each(data, function(i, option) { // add each <option/> from data
    $('<option value="' + option.id + '">' + option.name + '</option>').appendTo(el);
  });
}

[4xjbh]

Thanks but this returns a error in the js console (chrome) and the select control is empty.

Uncaught TypeError: Cannot use 'in' operator to search for '3951' in <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>

[4xjbh]

Should line 32 be:     ' + option.category + ' instead of ' + option.name + ' 

$('#category_id').change( function() {
    checkCategory();   // checks value and enables/disables subcategory control 
    var catid = $(this).val();
    var dataString = 'catid='+catid;
    $.ajax ({
      type: "POST",
      url: "catalogues.php",
      data: dataString,
      cache: false,
      success: function(data) {
        var el = document.getElementById('subcategory_id');      
        $(el).empty(); // remove all HTML inside <select/>
        $.each(data, function(i, option) { // add each <option/> from data
          $('<option value="' + option.id + '">' + option.name + '</option>').appendTo(el);
        });
      } 
    });
  });