AJAX不显示数据

I have two selects, the second one is hidden and it should be shown if the first select has been changed, I checked it through on('change', function(){ ... and it is working so far. I've checked and also showed a console.log when the first select box is changed.

The main problem here is when I picked a option from the first select box, it should send some request using AJAX. I've sent some request to fetch_sections.php and it should append or add data in my second select box.

This is my updated script:

<script>
    $(document).ready(function() {
        $('select').material_select();
        $('#school-list').on('change', function() {
            $.ajax({
                url: 'fetch_sections.php',
                type: 'post',
                dataType: 'html',
                data: {parent: $(this).val() },
                success: function(data)
                {
                    $('#section-list').empty();
                    $('#section-list').html(data);
                    console.log(data);
                }
            });
            $('#hideThis').show("slow");
        });
    });
</script>

This is my fetch_sections.php (working, checked with PostMan):

<?php
    require '../assets/php/init.php';

    if ($_POST)
    {
        $schoolID   = Essentials::sanitize($_POST['parent']);

        $fetchSQL   = "SELECT `sectionid`, `name` FROM `sections` WHERE schoolid = ?";
        $fetch      = $conn->prepare($fetchSQL);
        $fetch->execute([$schoolID]);
        $fetchRes   = $fetch->fetchAll(PDO::FETCH_ASSOC);
        if(!$fetchRes) {
            echo '
                <option value="" disabled selected>Unfortunately, there is no section here.</option>
            ';
        } else {
            foreach ($fetchRes as $section)
            {
                echo '
                    <option value="'.$section['sectionid'].'"">'.$section['name'].'</option>
                ';
            }
        }
    }

This is my select HTML also updated:

            <div class="row margin">
              <div class="input-field col s12">
                <select id="school-list" name="school-list">
                  <option value="" disabled selected>Choose your school</option>
                    ...
                </select>
                <label>School</label>
              </div>
            </div>
                <div class="row margin" id="hideThis" style="display:none">
                  <div class="input-field col s12">
                    <select id="section-list" name="section-list">
                      <option value="" disabled selected>Choose your section</option>
                    </select>
                    <label>Section</label>
                  </div>
                </div>

Update [as suggested by ccKep]:

I can now see the data that I want through console.log(data), the thing that it outputs is:

<option value="9-1">9-A...</option>, now I want to add it to my main select list but it doesn't let me.

The output should be:

                <select id="section-list" name="section-list">
                  <option value="" disabled selected>Choose your section</option>
                  <option value="9-1">9-A...</option>
                </select>