获取下拉菜单选中值并将其集成到模态框中进行表单提交前确认的教程

<form id="formSelectUserDelete" action="elimina_cliente_seleccionado.php" method="POST">
  <div class="mb-3">
    <label for="cliente" class="form-label">选择要删除的客户:</label>
    <select class="form-select" name="cliente" id="cliente">
      <option selected disabled>请选择一个客户进行删除...</option>
      <?php
      // 假设 $grupos 是一个包含客户名称的数组
      $grupos = ['客户A', '客户B', '客户C'];
      foreach($grupos as $item){
          echo "<option value=\"$item\">$item</option>";
      }
      ?>
    </select>
  </div>
  <button id="triggerDeleteModalBtn" type="button" class="btn btn-danger mt-3" data-bs-toggle="modal" data-bs-target="#deleteModal">
    删除客户
  </button>
</form>

<!-- 确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认操作</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 确认消息将通过JavaScript动态填充 -->
                您确定要删除选定的客户吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
    // 监听触发模态框按钮的点击事件
    $('#triggerDeleteModalBtn').on('click', function() {
        // 获取下拉菜单中当前选中的值
        var selectedClient = $('#cliente').val();

        // 检查是否选择了有效项
        if (selectedClient === null || selectedClient === "请选择一个客户进行删除...") {
            // 如果没有选择，可以给出提示或者阻止模态框显示
            alert('请先选择一个客户！');
            // 阻止模态框显示
            return false;
        }

        // 构造要显示在模态框中的确认消息
        var confirmationMessage = '您确定要删除客户：<strong>' + selectedClient + '</strong> 吗？此操作不可逆！';

        // 更新模态框的 body 内容
        $('#deleteModal .modal-body').html(confirmationMessage);

        // Bootstrap 5 模态框会自动显示，因为按钮有 data-bs-toggle 属性
        // 如果需要手动控制，可以使用 new bootstrap.Modal(document.getElementById('deleteModal')).show();
    });

    // 监听模态框内“确认删除”按钮的点击事件
    $('#confirmDeleteBtn').on('click', function() {
        // 提交表单
        $('#formSelectUserDelete').submit();
    });
});
</script>