从下拉菜单获取选中值并结合模态框进行表单提交确认的教程-php教程-PHP中文网

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

碧海醫心

发布： 2025-11-08 09:42:19

原创

705人浏览过

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

本教程详细讲解如何利用javascript和bootstrap模态框，在提交表单前获取下拉菜单的选中值，并将其动态显示在确认模态框中。用户确认后，再通过post方法提交包含选中值的表单，从而实现一个带有用户交互确认机制的表单提交流程。

概述

在Web应用开发中，用户在执行如删除、修改等敏感操作前，通常需要一个确认步骤。结合下拉菜单（Select Dropdown）选择特定项并将其值显示在确认对话框（Modal）中，是提升用户体验和防止误操作的有效方式。本教程将详细介绍如何使用HTML、Bootstrap和JavaScript（jQuery）实现这一功能：从下拉菜单获取选中值，将其动态嵌入到Bootstrap模态框的提示信息中，并在用户确认后提交包含该值的表单。

核心实现步骤

为了实现这一功能，我们需要对HTML结构进行适当调整，并编写相应的JavaScript代码来处理用户交互。

1. HTML 结构准备

首先，我们需要为表单、下拉菜单以及触发模态框的按钮添加唯一的id属性，以便JavaScript能够准确地定位和操作这些元素。同时，我们需要确保模态框中的“删除”或“确认”按钮也有一个可供JavaScript识别的id。

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

<!-- Modal -->
<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-primary" id="confirmDeleteButton">确认删除</button>
            </div>
        </div>
    </div>
</div>

登录后复制

关键改动点：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

form 标签添加 id="deleteUserForm"。
select 标签添加 id="customerSelect"，并优化了默认选项，使其value为空且disabled，强制用户选择一个实际客户。
触发模态框的 button 标签添加 id="triggerDeleteModal"，并将样式改为 btn-danger 以示删除操作。
模态框内的“Borrar”按钮修改为“确认删除”，并添加 id="confirmDeleteButton"。

2. JavaScript 逻辑编写

我们将使用jQuery来监听按钮点击事件，获取下拉菜单值，更新模态框内容，并在确认后提交表单。

<script>
    $(document).ready(function() {
        // 1. 监听触发模态框按钮的点击事件
        $('#triggerDeleteModal').click(function() {
            var selectedCustomer = $('#customerSelect').val(); // 获取下拉菜单的选中值

            // 检查是否选择了有效的客户
            if (!selectedCustomer) {
                alert('请选择一个客户进行删除！');
                return false; // 阻止模态框显示（如果未选择有效值）
            }

            // 构建确认消息，使用<strong>标签高亮客户名
            var confirmationMessage = '您确定要删除客户 <strong>' + selectedCustomer + '</strong> 吗？此操作不可逆！';

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

            // 由于按钮已设置data-bs-toggle和data-bs-target，模态框会自动显示，这里无需手动调用 .modal('show')
        });

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

登录后复制

代码解释：

$(document).ready(function() { ... });: 确保DOM加载完成后再执行JavaScript代码。
$('#triggerDeleteModal').click(function() { ... });: 当用户点击“删除客户”按钮时触发。
- $('#customerSelect').val(): 获取ID为customerSelect的下拉菜单当前选中的value。
- if (!selectedCustomer): 增加一个简单的验证，如果用户没有选择任何客户（即选中了默认的禁用选项），则弹出提示并阻止后续操作。
- $('#deleteModal .modal-body').html(confirmationMessage): 将动态生成的确认消息插入到模态框的.modal-body元素中。
$('#confirmDeleteButton').click(function() { ... });: 当用户点击模态框内的“确认删除”按钮时触发。
- $('#deleteUserForm').submit(): 触发ID为deleteUserForm的表单提交。这将以POST方式将customerSelect的选中值发送到elimina_cliente_seleccionado.php。

完整示例代码

以下是将HTML结构和JavaScript逻辑整合在一起的完整示例。请确保已引入Bootstrap 5的CSS和JS（包括Popper.js），以及jQuery库。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单值与模态框确认提交</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h2>客户删除管理</h2>
    <form id="deleteUserForm" action="elimina_cliente_seleccionado.php" method="POST">
      <div class="mb-3">
        <label for="customerSelect" class="form-label">选择要删除的客户:</label>
        <select class="form-select" name="cliente"

登录后复制

以上就是从下拉菜单获取选中值并结合模态框进行表单提交确认的教程的详细内容，更多请关注php中文网其它相关文章！