点击删除按钮后获取下拉选中值传入模态框再提交POST表单的方法

1. 调整原有代码的两处属性 #

首先修改两处HTML元素的属性，方便JS定位操作：

• 给下拉选择框添加id属性：

<select class="form-select" name="cliente" id="clienteSelect">

• 给模态框的确认删除按钮添加id属性：

<button type="button" class="btn btn-primary" id="confirmDeleteBtn">Borrar</button>

2. 添加JS逻辑实现交互 #

直接插入如下JS代码即可完成两个需求：模态框弹出时自动填充选中的客户名、点击确认按钮提交表单：

// 监听Bootstrap模态框的弹出前事件
const deleteModal = document.getElementById('deleteModal')
deleteModal.addEventListener('show.bs.modal', function (event) {
  // 获取下拉框选中的客户名
  const selectEl = document.getElementById('clienteSelect')
  const selectedCliente = selectEl.options[selectEl.selectedIndex].text
  const selectedValue = selectEl.value

  // 校验是否选中了有效客户
  if (selectedCliente === 'Seleccione un cliente para borrar...') {
    alert('请先选择要删除的客户')
    event.preventDefault() // 阻止模态框弹出
    return
  }

  // 替换模态框的提示文本
  const modalBody = deleteModal.querySelector('.modal-body')
  modalBody.textContent = `您确认要删除用户${selectedCliente}吗？`
})

// 监听确认删除按钮点击事件，提交表单
document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
  document.querySelector('form[action="elimina_cliente_seleccionado.php"]').submit()
})

注意：请将上述JS代码放在页面</body>标签的前面，或者包裹在DOMContentLoaded事件回调中，避免JS执行时页面元素还未加载完成导致报错。

3. 后端取值说明 #

后端elimina_cliente_seleccionado.php文件中直接通过$_POST['cliente']即可获取到提交的客户值，按你的业务逻辑编写删除操作即可。

内容的提问来源于stack exchange，提问作者Ricardo