jQuery：同じクラス名で複数の動的選択を操作する

Question

フォームで複数の選択入力を操作するのに問題があります。 基本的に同じクラス名のフィールド（車のブランド）をボタンで追加しますinput私はブランドを選択し、jQueryを使ってそのブランドのモデルを取得しますが、複数の選択をすると、同じ名前を持つため、すべての車種が入力を選択して変更されます。ここ は私のコードです：

$(".marca_r_1").on("change", function(e){ 
    if(event.target.value != null){ 
    $.get("/administracion/marcas-modelos/"+event.target.value+"",function(response){ 
     target = $('.modelo_r_1') 
     console.log(target) 
     if(response.length > 0){ 
     target.empty(); 
     for(i=0; i<response.length; i++){ 
      target.append("<option value='"+response[i].id+"'>"+response[i].modelo+"</option>"); 
     } 
     } else { 
     target.empty(); 
     target.append("<option value='#'>No se encontraron resultados..</option"); 
     } 
    }); 
    } 
}); 

私はjQueryを使ってこの問題を回避するにはどうすればよいですか？

EDIT：私はhtmlコード（私はLaravelで働いている）に置く：

<div class="row"> 
     <div class="col-lg-4"> 
      <div class="form-group"> 
       {!! Form::label("marca_r","Marca: ",["class"=>"control-label"]) !!} 
       {!! Form::select("marca_r[]",$marcas,null,["class"=>"form-control marca_r_1","placeholder"=>"Ingrese la marca del repuesto","required"]) !!}<br/> 
      </div> 
     </div> 
     <div class="col-lg-3"> 
      <div class="form-group"> 
       {!! Form::label("modelo_r","Modelo: ",["class"=>"control-label"]) !!} 
       {!! Form::select("modelo_r[]",array(),null,["class"=>"form-control modelo_r_1","placeholder"=>"Seleccione un modelo..","required"]) !!}<br/> 
      </div> 
     </div> 
     <div class="col-lg-3"> 
      <div class="form-group"> 
       {!! Form::label("vin_r","VIN: ",["class"=>"control-label"]) !!} 
       {!! Form::text("vin_r[]",null,["class"=>"form-control vin_r_1","placeholder"=>"Ingrese el VIN del repuesto","min"=>5]) !!}<br/> 
      </div> 
     </div> 
</div> 

をそして私はあなたが持っているボタン

Answer 1

により、同じクラス名を使用して動的に新しいフィールドを追加modelo_r_1クラスのすべてのタグを取得するので、 "target"を宣言すると問題が発生します。ここにあなたが現在変更select要素に関連して、ターゲットを見つける必要があるので、あなたがあなたのhtmlを投稿することができます

$(".marca_r_1").on("change", function(e){ 
    if(event.target.value != null){ 
    (function(target,value){ 
     $.get("/administracion/marcas-modelos/"+value+"",function(response){ 
     console.log(target) 
     if(response.length > 0){ 
      target.empty(); 
      for(i=0; i<response.length; i++){ 
       target.append("<option value='"+response[i].id+"'>"+response[i].modelo+"</option>"); 
      } 
     } else { 
      target.empty(); 
      target.append("<option value='#'>No se encontraron resultados..</option"); 
     } 
     }); 
    })($(this),event.target.value); 
    } 
});