javascript - 如何避免选择框上的ajax结果

Question

正如您在上面的示例中一样，我有占位符(没有值的选项)来表示例如。 选择子类别，但只要我更改我的类别值，子类别的结果就会显示。

我想要的是当我在子类别下拉列表中选择类别时仍然显示 Select Subcategory 但在该类别下加载所选类别的结果。简单来说:

Instead of showing results directly, shows placeholder option and results be under it.

这是我的代码:

// HTML
<label for="specification_id">specifications</label>
  <select name="specification_id" class="form-control">
    <option value="">Select Specification</option>
  </select>

// JAVASCRIPT

<script type="text/javascript">
  $(document).ready(function() {
    $('select[name="subcategory_id"]').on('change', function() {
      var subcategoryID = $(this).val();
      if(subcategoryID) {
      $.ajax({
        url: '{{ url('getspecifications') }}/'+encodeURI(subcategoryID),
        type: "GET",
        dataType: "json",
        success:function(data) {
        $('select[name="specification_id"]').empty();
        $.each(data, function(key, value) {
            $('select[name="specification_id"]').append(
                  "<option class='form-control' value='"+ value['id'] +"'>"+ value['title'] +"</option>"
                  );
            });
        }
      });
      }else{
        $('select[name="specification_id"]').empty();
      }
    });
  });
</script>

Answer 1

清空项目后，确保将空白占位符追加回其中:

else{
    $('select[name="specification_id"]').empty().append("<option value='' selected>Select Specification</option>");
  }

或者在一开始清除选择时跳过它:

else{
    $('select[name="specification_id"]').not(':first').remove();
  }

我忘记了 success: 函数中的 empty():

success:function(data) {
$('select[name="specification_id"]').not(':first').remove();
//...

或:

success:function(data) {
$('select[name="specification_id"]').empty().append("<option value='' selected>Select Specification</option>");
//...