默认选择在ajax条件下拉选择

Question

需要帮助，从我的条件下拉选择中设置默认选择选项。

这是我的第一选择下拉菜单中

<select name="category" id="category"> 
    <option value="" disabled selected>Select category</option> 
    @foreach($categories as $cats) 
    <option value="{{$cats->id}}">{{$cats->name}}</option> 
    @endforeach 
</select> 

我依赖的下拉是这样

<select name="product" id="product"> 
    <option value=""></option> 
</select> 

JS

<script> 
    $('#category').on('change',function(e){ 
     console.log(e); 

      var cat_id = e.target.value; 
      $.get('/products?cat_id=' + cat_id, function(data){ 
      $('#product').empty(); 

      $.each(data, function(index, subcatObj){ 
      $('#product').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>'); 
      }); 
     }); 
    }); 
</script> 

对于简单的下拉式选择，就像类别一样，只需使用它就可以正常工作，但我怎么能为产品下拉选择此默认选择？

感谢任何帮助。

Answer 1

您可以将这样的事情

$('#product').empty(); 
$('#product').append('<option value="" disabled selected>Select Product</option>'); 
      }); 
$.each(data, function(index, subcatObj){ 
      $('#product').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>'); 
      }); 

我已经看到你已经使用$('#product').empty();，因此您的包括<option value=""></option>是越来越干脆去掉你把你的HTML。

您可以使用的.html（）代替.append（），所以你不需要$('#product').empty();为的.html（）将覆盖你的DOM。

然后你只能需要把这个在你的HTML

<select name="product" id="product"> 

</select> 

而JavaScript会是这样的

<script> 
    $('#category').on('change',function(e){ 
     console.log(e); 

      var cat_id = e.target.value; 
      var response = ''; 
      $.get('/products?cat_id=' + cat_id, function(data){ 
      response = '<option value="" disabled selected>Select Product</option>'; 

        $.each(data, function(index, subcatObj){ 
         response .= '<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>'; 
        }); 

      $('#product').html(response); 
      }); 
    }); 
</script> 

可以的.html之间找到差异（）和.append（） here What is the difference between .empty().append() and .html()?