本教程详细介绍了如何在Web页面中，利用JavaScript（jQuery）和Bootstrap模态框，实现用户在提交表单前对下拉菜单选中值的确认。通过捕获下拉菜单的选中值，动态更新模态框内容以显示确认信息，并在用户确认后触发表单提交，从而提升用户体验和操作安全性。
在Web开发中，尤其涉及删除、修改等敏感操作时，通常需要通过模态框（Modal）向用户提供二次确认，以避免误操作。当这些操作与动态选择的数据（如下拉菜单的选中项）相关联时，如何将选中值传递给模态框并最终触发表单提交，是一个常见的需求。本教程将详细阐述如何结合HTML、Bootstrap和jQuery来实现这一功能。
我们的目标是：
首先，我们需要为表单、下拉菜单和触发模态框的按钮添加唯一的id属性，以便JavaScript能够准确地定位并操作它们。同时，模态框也需要一个确认按钮，我们也为其添加id。
<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 value="">请选择一个客户...</option>
<?php
// 假设 $grupos 是一个包含客户名称的数组
$grupos = ["客户A", "客户B", "客户C"];
foreach($grupos as $item){
echo "<option value=\"$item\">$item</option>";
}
?>
</select>
</div>
<button id="triggerDeleteModal" type="button" class="btn btn-danger mt-3" data-bs-toggle="modal" data-bs-target="#deleteModal">
删除客户
</button>
</form>
<!-- Bootstrap 模态框 -->
<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="confirmDeleteButton">确认删除</button>
</div>
</div>
</div>
</div>HTML 结构说明：
现在，我们将使用jQuery来处理事件监听、DOM操作和表单提交。
<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. 监听触发模态框按钮的点击事件
$('#triggerDeleteModal').on('click', function() {
var selectedClient = $('#cliente').val(); // 获取下拉菜单的选中值
var modalBodyText = '';
if (selectedClient === "" || selectedClient === null) {
// 如果没有选择任何客户，则显示警告信息
modalBodyText = '请先选择一个客户才能进行删除操作。';
// 禁用确认删除按钮，防止误操作
$('#confirmDeleteButton').prop('disabled', true);
} else {
// 动态构建模态框的提示信息
modalBodyText = '您确定要删除客户 <strong>' + selectedClient + '</strong> 吗？此操作不可逆！';
// 启用确认删除按钮
$('#confirmDeleteButton').prop('disabled', false);
}
// 更新模态框的 body 内容
$('#deleteModal .modal-body').html(modalBodyText);
// Bootstrap 5 的模态框通常不需要手动调用 .modal('show')，
// 因为 data-bs-toggle 和 data-bs-target 已经处理了。
// 但如果需要更细致的控制，也可以手动调用：
// var myModal = new bootstrap.Modal(document.getElementById('deleteModal'));
// myModal.show();
});
// 2. 监听模态框内“确认删除”按钮的点击事件
$('#confirmDeleteButton').on('click', function() {
// 当用户点击模态框内的确认按钮时，提交表单
$('#formSelectUserDelete').submit();
// 提交后可以关闭模态框，但表单提交通常会刷新页面，所以不是必需的
// var myModal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
// if (myModal) {
// myModal.hide();
// }
});
});
</script>JavaScript 代码说明：
将上述HTML和JavaScript代码整合到一个文件中，即可实现所需功能。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除客户确认示例</title>
<!-- 引入 Bootstrap 5 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">
<h1>删除客户</h1>
<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 value="">请选择一个客户...</option>
<?php
// 假设 $grupos 是一个包含客户名称的数组，实际应用中会从数据库获取
$grupos = ["客户A", "客户B", "客户C", "客户D"];
foreach($grupos as $item){
echo "<option value=\"$item\">$item</option>";
}
?>
</select>
</div>
<button id="triggerDeleteModal" type="button" class="btn btn-danger mt-3" data-bs-toggle="modal" data-bs-target="#deleteModal">
删除客户
</button>
</form>
<!-- Bootstrap 模态框 -->
<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="confirmDeleteButton">确认删除</button>
</div>
</div>
</div>
</div>
</div>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
$('#triggerDeleteModal').on('click', function() {
var selectedClient = $('#cliente').val();
var modalBodyText = '';
if (selectedClient === "" || selectedClient === null) {
modalBodyText = '请先选择一个客户才能进行删除操作。';
$('#confirmDeleteButton').prop('disabled', true);
} else {
modalBodyText = '您确定要删除客户 <strong>' + selectedClient + '</strong> 吗？此操作不可逆！';
$('#confirmDeleteButton').prop('disabled', false);
}
$('#deleteModal .modal-body').html(modalBodyText);
});
$('#confirmDeleteButton').on('click', function() {
$('#formSelectUserDelete').submit();
});
});
</script>
</body>
</html>通过结合HTML、Bootstrap的模态框组件和jQuery的事件处理能力，我们可以轻松实现一个用户友好的表单提交确认流程。这种模式不仅提升了用户体验，也为敏感操作提供了额外的安全层，是现代Web应用中常见的交互设计之一。理解并掌握这种动态数据与模态框交互的技巧，对于开发交互式Web页面至关重要。
以上就是动态获取下拉菜单值并结合Bootstrap模态框进行表单提交确认的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
449
收藏
