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

Posted 2023-05-07

【中文标题】如果为空选择选项，则单击按钮时显示模式引导

【英文标题】：Show modal bootstrap when click button if the null select option

【发布时间】：2022-01-10 19:02:30

【问题描述】：

我通过单击删除按钮（从选择标记中删除选项）通过 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);
    );

【参考方案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()

【讨论】：

我不想显示alert。我希望显示引导模式而不是 alert