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

当您声明“target”时出现问题，因为您获得了类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);
  }
});

jQuery：使用相同的类名操作多个动态选择

1 个答案: