デフォルト選択ajax条件付きドロップダウン選択

Question

デフォルトの選択オプションフォームを設定するためのヘルプが必要条件ドロップダウン選択。ここで

は私の最初のドロップダウンである私の依存ドロップダウンがこの

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

のようなものです

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

を選択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> 

単純なドロップダウン選択は、カテゴリ1と同様に単純に使用され、うまくいきましたが、どのようにして製品のdrowdown selectに対してこのデフォルトの選択を行うことができますか？

ありがとうございました。あなたは私はあなたが$('#product').empty();を使用し、したがって、あなたの<option value=""></option>が含まれていた見てきました。この

$('#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>'); 
      }); 

のようなものを追加することができ

Answer 1

はあなたのhtmlに入れた完全に取り除かなっています。

あなたはとてもあなたが（$('#product').empty();として.htmlをする必要はありません代わりに.append（）のの.html（）を使用することができます）は、あなたのDOMを上書きします。

そして、あなたは、あなたのhtml

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

</select> 

をでこれを置く必要があることができ、あなたのjavascriptのは、あなたが.htmlの間の違いを見つけることができます。この

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

のようなもの（）こととなります.append（）ここにWhat is the difference between .empty().append() and .html()?