Dynamic select options php and mysql

Question

I know this question have been asked many times, but I have tried for hours and nothing worked, I'm a noob with php and ajax so, I might be missing a small thing that I'm not aware of, What I'm trying to achieve here is that, I want the user to select a food group and based on that a list of ingredients will show up.

I tested my process.php file alone and it is working well, I have also tested the script what happens is that the line starting from $.ajax doesn't work when I comment it out and type alert(parent) I actually get the value of the option selected, so what am I doing wrong here? or am I missing an import? P.S I'm using bootstrap 3.0 for the design

Here is my html code

<!--  field food group-->
          <div class ="field form-group">
            <label for="food-group"> Food Group * </label>
            <div class="input-group input-group-lg">

            <select class="form-control" id="food-group-id" name="food-group" onchange="ajaxfunction(this.value)">
              <?php
              // retreiving the recipe groups
                  $RecipeGroup = new FoodGroup();
                  $data = $RecipeGroup->findAll();

                  foreach ($data->results() as $recipegroup) {
                    // displaying the options
                    echo '<option value="'.$recipegroup->food_group_id.'">'.$recipegroup->food_group_name.'</option>';
                  }                  
               ?>

            </select>

            </div>
          </div>
          <!--  field Ingredients-->
          <div class ="field form-group">
            <label for="ingredients"> Ingredients * </label>
            <div class="input-group input-group-lg">

            <select class="form-control" id="ingredients">

               <?php
              // retreiving the recipe groups
                  $ingredients = new Ingrident();
                  if(Input::exists()){
                    $data = $ingredients->findByGroup(Input::get('food-group'));
                  }else
                  $data = $ingredients->findByGroup(1);

                  foreach ($data->results() as $ingredient) {
                    // displaying the options
                    echo '<option value="'.$ingredient->ingrident_id.'">'.$ingredient->ingrident_name.'</option>';
                  }                  
               ?>

            </select>
            <br> <br> <br>
            <span id="helpBlock" class="help-block center">Ingredient not listed ?
              <button class="btn btn-primary center" value="add-ing"> <span class="glyphicon glyphicon-plus"></span> Add New Ingredient </button>

            </span>

            </div>
          </div>

Here is my script

<script type="text/javascript">
  function ajaxfunction(parent)
  {


    $.ajax({
          url: 'process.php?food-group=' + parent;
          success: function(data) {
              $("#ingredients").html(data);
          }
      });  
  }
</script>

Here is my process.php file

<?php
    mysql_connect('localhost', 'root','');
    mysql_select_db("online_recipes");

    $result = mysql_query("SELECT * FROM `ingrident` WHERE `food_group_id_fk` = " . mysql_real_escape_string($_GET['food-group']));
    while(($data = mysql_fetch_array($result)) !== false)
        echo '<option value="', $data['ingrident_id'],'">', $data['ingrident_name'],'</option>';

A list of my imports

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>

<script src="js/ie10-viewport-bug-workaround.js"></script>

Answer 1

$.ajax({
          url: 'process.php',
          type:'post',
          data: {parent: parent},
          success: function(data) {
              $("#ingredients").html(data);
          }
      }); 

in your process.php

$parent = $_POST['parent'];
echo($parent);