如何使用bootstrap-table.js在表格列中添加select下拉选择元素

你遇到的[object Object]输出问题，是因为bootstrap-table默认会将字段绑定的原始值直接转为字符串插入DOM，jQuery对象转字符串的结果就是[object Object]，而非你预期的DOM元素，不能直接将DOM对象赋值给数据数组的字段。

用bootstrap-table自带的列格式化（formatter）能力渲染下拉框，是官方推荐的标准实现方式：

步骤1：给目标列添加formatter配置 #

在你的HTML表格对应th标签上新增data-formatter属性，指定格式化函数名：

<th data-field="reason" data-formatter="renderReasonSelect">选择原因</th>

步骤2：编写格式化函数返回select的HTML字符串 #

不要用jQuery创建DOM对象，直接返回符合要求的select HTML字符串即可，还可以通过参数拿到当前行的所有数据做自定义配置：

// value：当前reason字段的原始值，row：当前行完整数据对象，index：行索引
function renderReasonSelect(value, row, index) {
  // 可根据业务需求动态生成option，这里为示例固定写死
  return `
    <select class="reason-select form-control" data-row-id="${row.id}">
      <option value="" ${value === '' ? 'selected' : ''}>请选择</option>
      <option value="超时" ${value === '超时' ? 'selected' : ''}>超时</option>
      <option value="信息错误" ${value === '信息错误' ? 'selected' : ''}>信息错误</option>
      <option value="其他" ${value === '其他' ? 'selected' : ''}>其他</option>
    </select>
  `
}

注意：数据数组的reason字段不需要赋值jQuery对象，可直接存下拉框的默认选中值即可

步骤3：绑定下拉框选择事件提交数据 #

因为select是动态渲染的元素，需要用事件委托绑定change事件，拿到选中值后调用提交接口：

// 事件委托绑定到静态父节点，这里用document也可以，换成你表格的外层静态容器性能更好
$(document).on('change', '.reason-select', function() {
  const selectedReason = $(this).val()
  const rowId = $(this).data('row-id') // 拿到当前行对应的业务数据唯一ID
  // 调用提交接口
  $.ajax({
    url: '你的提交接口地址',
    method: 'POST',
    data: {
      id: rowId,
      reason: selectedReason
    },
    success: function(res) {
      // 自定义提交成功后的逻辑
      console.log('提交成功')
    }
  })
})

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