Tengo un modal que se muestra a través de JavaScript haciendo clic en el botón Eliminar (eliminando una opción de una etiqueta de selección). Tengo que verificar si una opción está seleccionada antes de mostrar el modal de alerta, pero no pude encontrar una manera de ocultar el modal de alerta incluso si no se selecciona nada.

Utilicé una función de JavaScript para verificar, pero aún después de verificar, aparece el modal de alerta.

Este es el código HTML:

espada

 <select class="form-control selectpicker" title="Nothing selected." id="category_id" name="category_id" data-live-search="true"> @foreach($categories as $id => $name) <option value="{{ $id }}">{{ $name }}</option> @endforeach </select> <a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer" data-bs-toggle="modal" data-bs-target="#staticBackdrop"> <i class="fas fa-plus"></i> </a> <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-sm modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Warning</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Please select a location. </div> <div class="modal-footer"> <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>

guion

 <script> let count = 0; $('#addFilter').click(function () { if($('#category_id').val() === ''){ alert("Please select a location."); return false; } }); $('#staticBackdrop').on('show.bs.modal', function (event) { var modal = $(this); modal.find('#filter').val(filter); });