如何在HTML表格的下一个td中展示下拉框选中的选项？

嘿，这需求不难实现！我帮你把代码调整完善下，确保能顺利把下拉框选中的内容显示到相邻的td里：

1. 先补全并修正HTML结构 #

首先得确保你的下拉框所在td的下一个td里有用来显示内容的元素，同时给下拉框绑定选中变化事件，这样选选项时会自动触发函数：

<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>
      <input type="text" name="id1" form="form2" id="id1" class="form-control input-sm">
    </td>
    <td>
      <!-- 加上onchange事件，选中时调用函数a() -->
      <select class="form-control" id="fid" name="fid" form="form2" required onchange="a()">
        <option value="" selected disabled>请选择</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
      </select>
    </td>
    <td>
      <!-- 这里是显示选中内容的input，也可以换成span用文本显示 -->
      <input type="text" id="fid2" class="form-control input-sm" readonly>
    </td>
  </tr>
</table>

2. 优化JavaScript函数 #

你的原有函数已经能实现基本功能，我给它加了点容错判断，避免元素不存在时报错，同时兼容不同的显示元素类型（input或普通文本元素）：

function a() {
  // 获取下拉框和目标显示元素
  const selectBox = document.getElementById("fid");
  const displayEl = document.getElementById("fid2");
  
  // 先检查元素是否存在，防止报错
  if (!selectBox || !displayEl) return;
  
  // 获取选中项的文本内容
  const selectedText = selectBox.options[selectBox.selectedIndex].text;
  
  // 根据元素类型设置内容：input用value，普通元素用textContent
  if (displayEl.tagName === 'INPUT') {
    displayEl.value = selectedText;
  } else {
    displayEl.textContent = selectedText;
  }
}

3. 进阶优化：通用版（支持多行表格） #

如果你的表格有很多行下拉框，不想一个个写ID，推荐用事件委托的方式，不用硬编码ID，更灵活易维护：

<!-- 给表格加个ID，下拉框和显示元素用class标识 -->
<table id="myDataTable">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td><input type="text" name="id1" form="form2" class="form-control input-sm"></td>
    <td>
      <select class="form-control select-dropdown" name="fid" form="form2" required>
        <option value="" selected disabled>请选择</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
      </select>
    </td>
    <td><input type="text" class="selected-content" class="form-control input-sm" readonly></td>
  </tr>
  <tr>
    <td><input type="text" name="id2" form="form2" class="form-control input-sm"></td>
    <td>
      <select class="form-control select-dropdown" name="fid" form="form2" required>
        <option value="" selected disabled>请选择</option>
        <option value="a">选项A</option>
        <option value="b">选项B</option>
      </select>
    </td>
    <td><input type="text" class="selected-content" class="form-control input-sm" readonly></td>
  </tr>
</table>

对应的JavaScript：

// 给表格绑定事件委托，监听所有下拉框的变化
document.getElementById('myDataTable').addEventListener('change', function(e) {
  // 判断触发事件的是不是我们的下拉框
  if (e.target.classList.contains('select-dropdown')) {
    const selectedText = e.target.options[e.target.selectedIndex].text;
    // 找到当前下拉框所在td的下一个td，再获取里面的显示元素
    const displayEl = e.target.closest('td').nextElementSibling.querySelector('.selected-content');
    if (displayEl) {
      displayEl.value = selectedText;
    }
  }
});

这个版本不管你表格加多少行，都不需要修改JS代码，直接复用即可～

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