点击按钮时如何向弹窗表单传递多个值？

嘿，我来帮你搞定这个问题！要把按钮上的多个data属性值传递到弹窗表单里，其实用JavaScript（结合jQuery会更顺手，毕竟你的按钮用了Bootstrap样式）就能轻松实现，下面是具体的步骤和代码示例：

首先你得确保弹窗里的表单输入框有和按钮data属性对应的id或name，这样方便我们精准填充值。举个弹窗表单的示例：

<!-- 编辑公司资料弹窗 -->
<div class="modal fade" id="editCompanyModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">编辑公司资料</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="editCompanyForm">
          <div class="form-group">
            <label for="companyId">公司ID</label>
            <input type="text" class="form-control" id="companyId" name="companyId" readonly>
          </div>
          <div class="form-group">
            <label for="companyName">公司名称</label>
            <input type="text" class="form-control" id="companyName" name="companyName">
          </div>
          <div class="form-group">
            <label for="businessNature">企业性质</label>
            <input type="text" class="form-control" id="businessNature" name="businessNature">
          </div>
          <div class="form-group">
            <label for="companyAddress">公司地址</label>
            <input type="text" class="form-control" id="companyAddress" name="companyAddress">
          </div>
          <!-- 以下省略其他对应字段，和按钮的data属性一一对应即可 -->
          <div class="form-group">
            <label for="companyWebsite">公司网址</label>
            <input type="text" class="form-control" id="companyWebsite" name="companyWebsite">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">保存修改</button>
      </div>
    </div>
  </div>
</div>

接下来写JavaScript逻辑，监听按钮的点击事件，读取按钮上的所有data属性，再把对应的值填充到弹窗的输入框里。用jQuery的话代码会很简洁：

// 监听编辑按钮的点击事件
$('.edit-company').on('click', function() {
  // 一次性获取按钮上的所有data属性，jQuery会自动处理成对象
  const companyInfo = $(this).data();
  
  // 把值逐个填充到表单输入框
  $('#companyId').val(companyInfo.id);
  $('#companyName').val(companyInfo.name);
  $('#businessNature').val(companyInfo.nature);
  $('#companyAddress').val(companyInfo.address);
  $('#companyZipcode').val(companyInfo.zip);
  $('#companyAddressArea').val(companyInfo.area);
  $('#companyEmail').val(companyInfo.email);
  $('#companyPhoneNumber').val(companyInfo.phone);
  $('#companyWebsite').val(companyInfo.website);
  
  // 打开弹窗
  $('#editCompanyModal').modal('show');
});

如果你不想用jQuery，用原生JS也能实现，只是需要手动处理弹窗的显示逻辑：

// 给所有编辑按钮绑定点击事件
document.querySelectorAll('.edit-company').forEach(button => {
  button.addEventListener('click', function() {
    // 读取按钮的data属性集合
    const companyInfo = this.dataset;
    
    // 填充表单字段
    document.getElementById('companyId').value = companyInfo.id;
    document.getElementById('companyName').value = companyInfo.name;
    // 其他字段依次类推...
    
    // 手动显示弹窗（原生JS需要处理Bootstrap弹窗的样式）
    const modal = document.getElementById('editCompanyModal');
    modal.classList.add('show');
    modal.style.display = 'block';
    document.body.classList.add('modal-open');
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    document.body.appendChild(backdrop);
  });
});

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