0

Tengo el siguiente select en HTML

          <div class="col-12-flex">
            <small id="helpId" class="form-text text-muted">  Tarifas</small>
            <select class="custom-select form-select-sm" id="tarifa_cita_id" name="tarifa_cita_id">
                @foreach ($tarifas as $tarifa)
                    <option value="{{ $tarifa->id }}">{{ $tarifa->name  }}: ${{ number_format($tarifa->pivot->precio, 0, '.', '.') }}</option>
                @endforeach
            </select>
          </div>

Estoy tratando de limpiarlo con JQuery

$('#tarifa_cita_id').prop('selectedIndex', 0); 

Lo malo es que no funciona, no vuelve la selección al primer elemento del select.

En otra partes del programa sí me funciona. He probado sin éxito también con.

$('#tarifa_cita_id').get(0).selectedIndex = 0;

$('#tarifa_cita_id option').eq(0).prop('selected', true);  

¿Alguna idea?.

1 respuesta 1

0

Te faltaría enviarle el evento onchange con .trigger para que refresque.

jQuery("#dale").on("click", () => {
  jQuery("select option").prop("selected", false).trigger("change");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>Select</label>
  <select>
    <optgroup label="dragon's poring squash">
      <option>ending</option>
      <option>always</option>
      <option>spears</option>
    </optgroup>
    <optgroup label="suffer night's pain">
      <option>diamond</option>
      <option>unprotected</option>
      <option>consider</option>
    </optgroup>
  </select>
</div>
<button id=dale>limpia</button>

4
  • La respuesta es que la sintaxis sería así:$('#tarifa_cita_id').prop("selected", false).trigger("change");?. Lo probé y no me funciona. Eso sería de acuerdo a mi ejemplo?. Commented el 6 oct. 2022 a las 23:41
  • El selected false se aplica a los options. Eso dejaría el select con la primera opción. Otra es darle value vacío Commented el 7 oct. 2022 a las 1:10
  • lo solucioné dandole value=0 a la primera opcion del select. Efectivamente me envía a la primera opción. Commented el 7 oct. 2022 a las 16:02
  • si funciona, vale. yo prefiero el removerle el selected a las options y activar el change pq si hay algun otro evento colgado por ahi lo recibe como "no hay options seleccionadas" en el caso de los selects el comportamiento predeterminado es poner el foco en la primera option ( no la selecciona, el hecho de que si uno no selecciona explicitamente una option se toma la primera es otro comportamiento predeterminado ) son detalles que en cuanto se complejiza la cosa empiezan a aparecer. Commented el 7 oct. 2022 a las 18:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.