如何使用jQuery为动态增删改功能添加下拉菜单？

你已经实现了动态增删改，在此基础上给指定列加入下拉菜单是非常常规的需求，我来给你具体讲讲怎么修改你的代码：

步骤1：准备下拉菜单的选项 #

首先你需要定义下拉菜单的可选值，比如如果是给kra列加下拉，可以提前写好静态选项（也可以后续通过JS动态从后端获取）：

<!-- 提前写一个隐藏的下拉模板，方便后续克隆复用 -->
<select id="kra_template" style="display:none;">
  <option value="kra_option1">KRA选项1</option>
  <option value="kra_option2">KRA选项2</option>
  <option value="kra_option3">KRA选项3</option>
</select>

步骤2：修改edit_row函数，替换目标列为下拉菜单 #

假设你要把kra列改成下拉菜单，修改你的edit_row函数，把原来的文本内容替换成下拉组件，并且默认选中当前单元格的原有值：

function edit_row(no) {
  document.getElementById("edit_button" + no).style.display = "none";
  document.getElementById("save_button" + no).style.display = "block";
  
  var component = document.getElementById("component_row" + no);
  var kra = document.getElementById("kra_row" + no);
  var kpi = document.getElementById("kpi_row" + no);
  var sfa = document.getElementById("sfa_row" + no);
  
  // 保存当前kra单元格的文本值，用于设置下拉默认选中项
  var currentKraValue = kra.textContent.trim();
  
  // 清空kra单元格，插入克隆的下拉菜单
  kra.innerHTML = '';
  var selectElement = document.getElementById('kra_template').cloneNode(true);
  selectElement.id = "kra_select_" + no; // 给动态生成的下拉加唯一ID，方便后续取值
  selectElement.style.display = 'inline-block';
  
  // 让下拉菜单默认选中当前单元格的原有值
  for(let i=0; i<selectElement.options.length; i++){
    if(selectElement.options[i].value === currentKraValue){
      selectElement.selectedIndex = i;
      break;
    }
  }
  
  kra.appendChild(selectElement);
  
  // 其他列的编辑逻辑保持不变（比如用输入框替换文本）
  component.innerHTML = "<input type='text' id='component_text" + no + "' value='" + component.textContent + "'>";
  kpi.innerHTML = "<input type='text' id='kpi_text" + no + "' value='" + kpi.textContent + "'>";
  sfa.innerHTML = "<input type='text' id='sfa_text" + no + "' value='" + sfa.textContent + "'>";
}

步骤3：修改save_row函数，获取下拉菜单的选中值 #

保存的时候，需要从下拉菜单里获取选中值，而不是输入框的值：

function save_row(no) {
  // 获取下拉菜单的选中值
  var kraSelect = document.getElementById("kra_select_" + no);
  var updatedKra = kraSelect.options[kraSelect.selectedIndex].value;
  
  // 获取其他输入框的值
  var updatedComponent = document.getElementById("component_text" + no).value;
  var updatedKpi = document.getElementById("kpi_text" + no).value;
  var updatedSfa = document.getElementById("sfa_text" + no).value;
  
  // 更新单元格内容为修改后的值
  document.getElementById("component_row" + no).textContent = updatedComponent;
  document.getElementById("kra_row" + no).textContent = updatedKra;
  document.getElementById("kpi_row" + no).textContent = updatedKpi;
  document.getElementById("sfa_row" + no).textContent = updatedSfa;
  
  // 切换按钮显示状态，回到非编辑模式
  document.getElementById("edit_button" + no).style.display = "block";
  document.getElementById("save_button" + no).style.display = "none";
}

额外小提醒 #

• 如果你的下拉选项需要动态生成（比如从后端接口获取），可以在页面加载时用JS循环生成<option>标签插入到模板里。
• 既然你已经在用jQuery，也可以用它简化DOM操作，比如$('#kra_template').clone()、$(selectElement).val(currentKraValue)，代码会更简洁。
• 要是有动态新增行的逻辑，记得在新增行时，对应的列要么默认显示下拉，要么在触发编辑时能正确生成下拉组件。

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