javascript - 在选择更改事件时通过 jquery 提交表单

Question

当选择字段中发生更改事件时，我尝试通过 Jquery 提交表单，如下所示:

$('select#slc_level').change(function(event){
event.preventDefault();
console.log('changed')
$('form#formLevel').submit();

但是，Jquery 似乎无法捕获该事件。没有错误消息。我的表单中有三个“小部件”，但选择字段位于“小部件”级别。奇怪的是，Jquery 可以以我在此页面中的另一种形式捕获数字对象小部件中输入文件字段的更改事件。我的页面中的整个代码是:

<div class='col-md-3'>
<div class="widget">
  <!-- Level widget -->
  <h4 class="text-info">Níveis</h4>
  @if(count($collection->collections) > 0)
    <ul class="list-group">
    @foreach($collection->collections as $sub_collection)
      <li class="list-group-item">{{$sub_collection->name}}</li>
    @endforeach
    </ul>
    <br>
  @else
    <p class="text-muted">Nenhum cadastrado</p>
  @endif
    <form method="post" action="{{route('collection.form_level')}}" id="formLevel">
    <select id="slc_level" name="level_id" class="custom-select" autofocus>
      <option>Selecione ...</option>
      @foreach($levels as $level)
      <option value="{{ $level->id }}">{{ $level->name }}</option>
      @endforeach
    </select>
    {{ csrf_field() }}
    <input type="hidden" name="collection_id" value="{{$collection->id}}">
  </form>
</div>
<hr>

<!-- Digital Object widget -->
<div class="widget">
  <h4 class="text-info">Objeto Digital</h4>
  @if(count($collection->objects) > 0)
    <ul class="list-group">
    @foreach($collection->objects as $object)
      <li class="list-group-item">{{str_limit($object->path,20)}} - {{$object->type}} - {{round(Storage::size($object->path)/(1024*1024),2)}}MB
        <a id="{{$object->id}}" href="#" class="delobject text-danger" title="Remover item">(x)</a>
      </li>
    @endforeach
    </ul>
    <br>
  @else
    <p class="text-muted">Nenhum cadastrado</p>
  @endif
  <form method="post" action="{{route('object.attach')}}" enctype="multipart/form-data" id="formObject">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile" name="path">
    <label class="custom-file-label" for="customFile">Escolher arquivo</label>
  </div>
  {{ csrf_field() }}
  <input type="hidden" name="collection_id" value="{{$collection->id}}">
  <input type="hidden" name="type" value="jpeg">
  </form> 
</div>
<hr>

<!-- Dimension widget -->
<div class="widget">
  <h4 class="text-info">Dimensão e suporte</h4>
  @if(count($collection->dimensions) > 0)
    <ul class="list-group">
    @foreach($collection->dimensions as $dimension)
      <li class="list-group-item">{{$dimension->name}}, ({{$dimension->size}}) {{$dimension->type}}
        <a id="{{$dimension->id}}" href="#" class="deldimension text-danger" title="Remover item">(x)</a>
      </li>
    @endforeach
    </ul>
    <br>
  @else
    <p class="text-muted">Nenhum cadastrado</p>
  @endif        
  <button type="button" class="btn btn-primary btn-sm btn-block" data-toggle="modal" data-target="#dimensionModal">Inserir</button>
</div>
<hr>

<!-- Action widget -->
<div class="widget">
  <h4 class="text-info">Operações</h4>
  <a href="{{route('collection.edit',['collection_id'=>$collection->id])}}" class="btn btn-warning btn-sm btn-block">Editar</a>
  <button type="button" class="btn btn-danger btn-sm btn-block" id="btDelCollection" data-toggle="modal" data-target="#deleteModal" >Excluir</button>
  <a href="{{route('collection.publish',['collection_id'=>$collection->id]) }}" class="btn btn-primary btn-sm btn-block">{{($collection->published)?'Não publicar':'Publicar'}}</a>
</div>  

出了什么问题？

Answer 1

试试这个

$("#slc_level").change(function(){
    $('#formLevel').submit();
});