jQuery将选项附加到selectBox

Question

public function detail($id) {
    $data = DB::table('data_api')->where('id', $id)->get();
    $carousel = DB::table('data_carousel')->where('data_api_id', $id)->get();
    return view('detail', compact('data','carousel'));
}

$(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');
    }
  });
});

当我向selectBox附加选项时，它将被附加，但我无法选择任何选项，只有一个选项被自动选择

选择类别，然后在另一个selectBox中显示子类别

这些是HTML代码

<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>

这是我的jQuery代码

                        <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>

在chrome控制台中，它显示已添加选项，但selectBox完全为空，但选择并显示了索引为0的数据。