获取下拉菜单选中值并结合模态框进行表单提交的教程

<!-- 主表单区域 -->
<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 value="" selected disabled>请选择一个客户...</option>
      <?php
          // 假设 $grupos 是一个包含客户名称的数组
          $grupos = ['客户A', '客户B', '客户C'];
          foreach($grupos as $item){
              echo "<option value=\"$item\">$item</option>";
          }
      ?>
    </select>
  </div>
  <button id="botoncliente" 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">
        <!-- 动态内容将显示在此处 -->
        您确定要执行此操作吗？
      </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="botonmodalborrar">确认删除</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.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
    // 1. 监听“删除客户”按钮的点击事件
    $('#botoncliente').click(function() {
        // 获取下拉菜单中当前选中的值
        var selectedClient = $('#cliente').val();

        // 验证是否选择了有效的客户
        if (selectedClient === "" || selectedClient === null) {
            alert('请先选择一个客户！');
            return false; // 阻止模态框弹出
        }

        // 构建要显示在模态框中的确认消息
        var confirmationMessage = '您确定要删除客户：<strong>' + selectedClient + '</strong> 吗？';

        // 将确认消息更新到模态框的 body 中
        $('#deleteModal .modal-body').html(confirmationMessage);

        // Bootstrap的data-bs-toggle已经会显示模态框，
        // 但如果需要更复杂的控制，也可以手动调用：
        // $('#deleteModal').modal('show');
    });

    // 2. 监听模态框中“确认删除”按钮的点击事件
    $('#botonmodalborrar').on('click', function() {
        // 在这里可以执行最终的表单验证或其他逻辑
        // ...

        // 提交主表单
        $('#formSelectUserDelete').submit();
    });
});
</script>