Question

在上面的示例中，我有占位符（没有值的选项），例如。 Select Subcategory但是一旦我更改了类别值，子类别的结果就会显示。

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

不是直接显示结果，而是显示占位符选项和结果归于此。

这是我的代码：

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

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

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>");
//...

Answer 2

此处您的选项值为空，因为您调用空函数。所以你可以动态选择选项“选择规格” 以下程序对我来说很好，试试这种方式

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

        $.each(data, function(key, value) {
            $('select[name="specification_id"]').append(
                  "<option class='form-control' value='"+ 
          value['id'] +"'>"+ value['title'] +"</option>"
                  );
            });

谢谢

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

2 个答案: