默認選擇在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()?