如果为空选择选项，则单击按钮时显示模式引导

Question

我通过单击删除按钮（从选择标记中删除选项）通过 JavaScript 显示了一个模式。我必须在显示警报模式之前检查是否选择了一个选项，但即使没有选择任何内容，我也找不到隐藏警报模式的方法。

我使用了一个 JavaScript 函数来检查，但是在检查了警报模式之后仍然出现。

这是 HTML 代码：

刀片

<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>

脚本

<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);
    });

Answer 1

使用e.stopPropagation();

$('#addFilter').click(function (e) { // add argument
        if($('#category_id').val() === ''){
            alert("Please select a location.");
            e.stopPropagation(); // add this line 
            return false;
        }
    });

您可以手动显示模态。

var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop'), {
  keyboard: false
})
myModal.show()