Bootstrap表格多用户删除场景下JavaScript显示/隐藏功能失效求助

我懂你遇到的问题了——每次打开表格里第二个及以后用户的删除模态框，选择下拉选项时，对应的married_approval或other div根本不跟着切换显示状态，只有第一个用户的模态框正常工作，对吧？

问题根源 #

你的JS代码里用了document.getElementsByClassName("other")[0]和is_married[0]，这会始终选取页面上第一个带有对应类名的元素。但每个用户的删除模态框都是独立的DOM结构，每个模态框里都有自己的other和married_approval div，所以只有第一个模态框的元素会被操作，其他用户的模态框元素根本没被选中到。

修复方案 #

我们需要基于当前触发事件的<select>元素，锁定它所在的当前模态框，只在这个模态框范围内查找对应的div，而不是全局查找。

修改后的JS代码

function checkselect(delSelect) {
  const selectedVar = $(delSelect).val();
  // 找到当前select所在的模态框容器（假设你的模态框使用Bootstrap的.modal类）
  const currentModal = $(delSelect).closest('.modal');
  // 在当前模态框内精准查找目标元素
  const otherText = currentModal.find('.other');
  const marriedApproval = currentModal.find('.married_approval');

  console.log('selected_var: ' + selectedVar);
  
  switch(selectedVar) {
    case 'Married':
      otherText.hide();
      marriedApproval.show();
      break;
    case 'Others':
      otherText.show();
      marriedApproval.hide();
      break;
    default:
      otherText.hide();
      marriedApproval.hide();
  }
}

关键修改说明

1. 锁定当前模态框：$(delSelect).closest('.modal')会从触发事件的select元素向上遍历DOM树，找到最近的Bootstrap模态框容器，确保我们只操作当前打开的这个模态框里的元素。
2. 局部查找元素：currentModal.find('.other')只在当前模态框内部查找目标div，彻底避免了全局选第一个元素的问题。
3. 简化显示控制：用jQuery的show()/hide()方法替代直接修改style.display，更简洁也更符合Bootstrap的操作逻辑。

额外优化建议

你的HTML里给select用了重复的ID（id="i_deletereason"），如果每个模态框都有这个ID，这违反了HTML的ID唯一性规范，可能会导致其他隐性问题。建议把ID改成类名，比如：

<select name="i_deletereason" class="i_deletereason form-select select" onchange="checkselect(this);">

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