在提交表单前，如何将下拉菜单选中值传递至模态框进行确认

<!-- 主表单 -->
<form id="deleteClientForm" action="elimina_cliente_seleccionado.php" method="POST">
  <div class="mb-3">
    <label for="clientSelect" class="form-label">选择一个客户进行删除：</label>
    <select class="form-select" name="cliente" id="clientSelect">
      <option value="" selected disabled>请选择一个客户...</option>
      <?php
      // 假设 $grupos 是一个包含客户名称的数组
      $grupos = ["客户A", "客户B", "客户C", "客户D"];
      foreach($grupos as $item){
          echo "<option value=\"$item\">$item</option>";
      }
      ?>
    </select>
  </div>
  <!-- 触发模态框的按钮 -->
  <button type="button" class="btn btn-danger mt-3" id="triggerDeleteModalBtn" 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="confirmDeleteBtn">确认删除</button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.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() {
    // 1. 监听触发模态框按钮的点击事件
    $('#triggerDeleteModalBtn').click(function() {
        var selectedClient = $('#clientSelect').val(); // 获取下拉菜单的选中值
        var selectedClientText = $('#clientSelect option:selected').text(); // 获取选中项的文本

        // 检查是否选择了有效项
        if (!selectedClient) {
            alert('请先选择一个客户！');
            return; // 阻止模态框弹出
        }

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

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

        // 显示模态框 (data-bs-toggle="modal" 和 data-bs-target="#deleteModal" 已经处理了显示，
        // 但如果需要更精细控制，也可以手动调用 .modal('show'))
        // $('#deleteModal').modal('show'); 
    });

    // 2. 监听模态框内确认删除按钮的点击事件
    $('#confirmDeleteBtn').on('click', function(e) {
        // 阻止默认行为（如果按钮是 type="submit"）
        e.preventDefault(); 

        // 提交主表单
        $('#deleteClientForm').submit();

        // 可选：隐藏模态框
        $('#deleteModal').modal('hide');
    });
});
</script>