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

【问题标题】：How to avoid ajax result on select box如何避免选择框上的ajax结果
【发布时间】：2018-02-07 06:57:18
【问题描述】：

正如您在上面的示例中，我有占位符（没有价值的选项）可以说，例如。 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>

【问题讨论】：

好吧，你在select 上调用empty()，这会清空select...
@MikeMcCaughan 我打电话给empty() 只是为了在用户搜索另一个类别时重置结果，否则它将显示第一个和第二个选择的类别的结果。
好吧，当你清空它时，你会删除选项.....所以添加默认选项......
@epascarello 不确定我是否明白你的意思。
将选项添加到列表顶部....您删除所有内容，因此要么复制第一项，要么删除第一项之后的选项....

标签： javascript jquery html ajax

【解决方案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>");
//...

【讨论】：

@mafortis 你是对的，因为我忘了处理成功函数 empty() 语句。查看编辑。我补充说。
它仍然显示结果而不是首先显示我们的选项：\
@mafortis 它是否在列表中显示“空白”选项？还是根本没有？如果确实发生了变化，可能会将append() 更改为prepend()？
您能否尝试完全删除empty() 调用以确保问题出在那里？（它将汇总选项，但现在仅用于测试）
好的，现在可以了 :) 我就是这样做的，$('select[name="subcategory_id"]').empty().append("<option value='' selected>Select</option>"); 在很大程度上感谢您。

【解决方案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>"
                  );
            });

谢谢

【讨论】：