Javascript 如何避免在选择框上出现ajax结果

正如您在上面的示例中所说，我有占位符（选项无值），例如，

选择子类别

，但一旦我更改了类别值，就会显示子类别的结果

我想要的是，当我在子类别下拉列表中选择类别时，仍然显示

选择子类别

，但在该下拉列表下，将加载所选类别的结果。简言之：

不直接显示结果，而是显示占位符选项和 结果将在它之下

这是我的密码：

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

//HTML
规格
选择规格
//JAVASCRIPT
$（文档）.ready（函数（）{
$（'select[name=“subcategory_id”]”）。在（'change'，function（）上{
var subcategory id=$（this.val（）；
if（子类别ID）{
$.ajax({
url:{{url（'getspecifications'）}/'+encodeURI（子类别ID），
键入：“获取”，
数据类型：“json”，
成功：功能（数据）{
$（'select[name=“specification_id”]”）。空（）；
$。每个（数据、函数（键、值）{
$（'select[name=“specification_id”]”）。追加(
“”+值['title']+“”
);
});
}
});
}否则{
$（'select[name=“specification_id”]”）。空（）；
}
});
});

这里的选项值为空，因为您调用了empty函数。 因此，您可以动态选择选项“选择规范” 下面的步骤对我来说很好，试试这个方法

        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>"
                  );
            });

成功：函数（数据）{
$（'select[name=“specification_id”]”）。空（）；
$（'select[name=“specification_id”]”）。附加（“select
规格）；
$。每个（数据、函数（键、值）{
$（'select[name=“specification_id”]”）。追加(
“”+值['title']+“”
);
});

---

谢谢

< P>排空项目后，务必在后面加上空白占位符：

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

我忘记了

success:

函数中的

empty（）

：

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

或：

成功：函数（数据）{
$（'select[name=“specification_id”]”）。empty（）.append（“select specification”）；
//...

嗯，您正在调用

选择

上的

empty（）

，这会清空

选择

。@MikeMcCaughan我调用

empty（）

仅在用户搜索其他类别时重置结果的情况下，否则将显示第一个和第二个选定类别的结果。当您清空该类别时，您将删除该选项….因此添加默认选项….@epascarello不确定我是否明白您的意思。将该选项添加到列表顶部….您将删除所有内容，以便复制fi重新设置项目或删除第一个之后的选项。…@mafortis您是对的，因为我忘记处理success funtion empty（）语句。请检查编辑。我添加了它。它仍然显示结果，而不是首先显示我们的选项：\@mafortis是否显示“空白”但是列表中的选项？或者根本没有？如果它确实发生了变化，可能会将

append（）

更改为

prepend（）

？您可以尝试完全删除

empty（）

调用，以确保问题来自于此吗？（它将聚合选项，但仅用于现在的测试）现在就可以了：）我是这样做的，

$（'select[name=“subcategory_id”]）.empty（）.append（“select”）；

感谢您的大力支持。

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