Load second drop down menu based on selection of first drop down

Question

The agenda is to populate second dropdown menu based on first down menu selection. I have coded it to a mere extent but it seems I'm missing some piece somewhere. Thanks in advance.

HTML CODE:

<div class="form-group">
    <label >Category</label>
    <select id="disabledSelect" class="form-control" name="product_category" onchange="ajaxfunction(this.value)">
        <option active>Select a Category</option>
        <?php
        load_category_dropdown();
        ?>                      
    </select>            
</div>

<div class="form-group">
    <label >Category</label>
    <select id="sub" class="form-control" name="sub" >
      <option active>Select a Category</option>                     
    </select>            
</div>

AJAX function:

<script type="text/javascript">
function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}
</script>

process.php code:

<?php
include("db_connect.php");  
$x=$_GET['parent'];
$get_cat="SELECT * FROM categories WHERE parent_id = $x";
$run_cat=mysqli_query($con,$get_cat);
echo "<option value='1'>Hello</option>";
while($data=mysqli_fetch_array($run_cat))
{       
    echo "<option value='$data['cat_id']'>$data['cat_tittle']</option>";
}
?>

Answer 1

Two Syntax Errors:

1. Javascript Syntax Error: + parent; there is a semi-colon, replace with comma

2. PHP Syntax Error: wrap $data['cat_id'] like {$data['cat_id']}