JQuery добавление опции для выбора Box

Question

$(document).ready(function() {

  $('select[name="productCategory"]').on('change', function() {
    console.log($(this).val());
    var categoryID = $(this).val();
    if (categoryID != null) {

      $.ajax({
        type: "GET",
        title: "subCategory",
        url: "admin/Category/getSubCategory/" + categoryID,
        contentType: "application/json",
        datatype: "json",
        success: function(result) {
          console.log("subCategory Success");

          parsedobj = JSON.parse(result);

          $('select[name="productSubCategory"]').empty();

          parsedobj = JSON.parse(result)

          var appenddata = '';
          var subCat = $('#productSubCategory');


          $.each(parsedobj, function(index, value) {
            $('select[name="productSubCategory"]').append('<option value="' + value.subCategoryID + '">' + value.subCategory + '</option>');


            console.log("valueID : " + value.subCategoryID + " , " + "value.name : " + value.subCategory);
          });

          $('#productSubCategory').change();

        },
        error: function(xhr, textStatus, error) {
          console.log('categoryID failed');
          console.log(xhr.statusText);
          console.log(textStatus);
          console.log(error);
        }
      });

    } else {
      $('select[name="productSubCategory"]').empty();
      console.log('categoryID is null');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group label-floating">
  <div class="row">
    <div class="col-lg-5 col-md-6 col-sm-3">
      <select class="selectpicker" data-style="btn btn-primary btn-round" title="Single Select" id="productCategory" name="productCategory">
        <option disabled selected>Choose Category</option>
        <?php foreach ($category as $row) { ?>
        <option value="<?php echo $row['categoryID']; ?>">
          <?php echo $row['category']; ?>
        </option>
        <?php } ?>
      </select>
    </div>

  </div>

  <div class="form-group label-floating">
    <div class="row">
      <div class="col-lg-5 col-md-6 col-sm-3">
        <select class="selectpicker" data-style="btn btn-primary btn-round" title="subCategory" id="productSubCategory" name="productSubCategory">

        </select>
      </div>

    </div>
  </div>

Когда я добавляю опцию в selectBox, она добавляется, но я не могу выбрать ни одну из опций, только одна опция выбирается автоматически

Выбор категории, а затем отображение подкатегории в другом окне выбора

Это HTML-код

                        <div class="form-group label-floating">
                                <div class="row">
                                <div class="col-lg-5 col-md-6 col-sm-3">
                                  <select class="selectpicker"  data-style="btn btn-primary btn-round" title="Single Select" id="productCategory" name="productCategory">
                                    <option disabled selected>Choose Category</option>
                                    <?php foreach ($category as $row) { ?>
                                    <option value="<?php echo $row['categoryID']; ?>"><?php echo $row['category']; ?></option>    
                                    <?php } ?>
                                  </select>
                                </div>

                        </div>

                        <div class="form-group label-floating">
                                <div class="row">
                                <div class="col-lg-5 col-md-6 col-sm-3">
                                  <select class="selectpicker"  data-style="btn btn-primary btn-round" title="subCategory" id="productSubCategory" name="productSubCategory">

                                  </select>
                                </div>

                                </div>
                        </div>

Вот мой код jQuery

<script type="text/javascript">
 $(document).ready(function() {

    $('select[name="productCategory"]').on('change', function() {
        console.log($(this).val());
        var categoryID = $(this).val();
        if(categoryID!=null) {

            $.ajax({
            type:"GET",
            title: "subCategory",
            url: "admin/Category/getSubCategory/"+categoryID,
            contentType: "application/json",
            datatype: "json",
            success: function(result){
                console.log("subCategory Success");

                parsedobj = JSON.parse(result);

                $('select[name="productSubCategory"]').empty();

                 parsedobj = JSON.parse(result)

                 var appenddata='';
                 var subCat = $('#productSubCategory');


                    $.each(parsedobj, function(index, value) 
                    {
                       $('select[name="productSubCategory"]').append('<option value="'+ value.subCategoryID +'">'+ value.subCategory +'</option>');


                        console.log("valueID : "+value.subCategoryID+" , "+"value.name : "+value.subCategory);
                    });

                    $('#productSubCategory').change();

            },
            error: function(xhr, textStatus, error){
                    console.log('categoryID failed');
                    console.log(xhr.statusText);
                    console.log(textStatus);
                    console.log(error);
            }
        });

        }else{
            $('select[name="productSubCategory"]').empty();
            console.log('categoryID is null');
        }
    });
});

в консоли Chrome показывает, что опция была добавлена, но selectBox полностью пуст, но данные с индексом 0 выбраны и показаны.