jQuery：操纵多个动态选择使用相同的类名称创建

Question

我在操作多个选择输入在我的表单上有困难.. 基本上我通过按钮添加一些字段（汽车品牌）具有相同的类名称，所以在我的选择输入我选择一个品牌和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？

编辑：我把我的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的所有标签，因此在声明“目标”时会出现问题。

试着这么做：

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