Question

我想在选择字段中发生更改事件时通过Jquery提交表单，如下所示：

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

但是，似乎Jquery无法捕获事件。没有错误消息。我有三个小部件＆＃39;在表单中，但是选择字段位于级别＆＃39;小部件中。奇怪的是，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();
});

Answer 2

尝试Jquery on方法

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

Answer 3

我认为你不需要选择＃slc＆＃39; _level

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

你可以直接输入id 喜欢

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

在选择更改活动时通过jquery提交表单

3 个答案: