复用JavaScript处理通用HTML元素的最佳方式：下拉选单联动对应徽章更新

完全可以只用单个JavaScript函数实现所有同类下拉框的徽章更新，不需要逐个定义所有元素的ID。

实现思路 #

你可以利用事件触发对象的上下文和DOM层级关系，或者自定义属性关联，动态定位到当前下拉框对应的徽章元素，避免硬编码所有ID。

方案1：利用DOM层级关系（推荐，不需要修改现有HTML结构） #

你的现有结构里，徽章span和下拉框select在同一个父div下，直接通过触发事件的select元素向上找父容器，再筛选出同类名的徽章即可：

完整JS代码 #

// 选中所有需要绑定事件的下拉框（可以给这些下拉框加统一类名比如.status-select，避免选中页面其他无关下拉框）
const allStatusSelects = document.querySelectorAll('select.form-control');

// 给所有下拉框绑定同一个事件处理函数
allStatusSelects.forEach(select => {
  select.addEventListener('change', handleBadgeUpdate);
});

// 通用徽章更新函数
function handleBadgeUpdate() {
  // this就是当前触发change事件的下拉框
  const selectedValue = this.options[this.selectedIndex].value;
  // 找到当前下拉框的父容器，再查找里面的徽章元素
  const statusBadge = this.parentElement.querySelector('.badge');
  
  if (selectedValue === 'Yes') {
    statusBadge.className = 'badge badge-soft-success';
    statusBadge.textContent = 'Good!';
  } else {
    statusBadge.className = 'badge badge-soft-danger';
    statusBadge.textContent = 'Bad!';
  }
}

这个方案不需要修改你现有的HTML代码，新增再多同结构的表单项，只要保持徽章和下拉框在同一个父容器下，都不需要修改JS代码。

方案2：自定义属性关联（适合DOM结构不固定的场景） #

如果后续你的DOM结构可能调整，父子层级不固定，可以用自定义属性绑定下拉框和对应的徽章ID：

修改后的HTML示例 #

<div class="col-sm-6">
  <label class="form-label" for="project-tier-entry-level-label">项目是否符合我们的层级准入标准？</label>
  <span class="badge badge-soft-success" id="project-tier-entry-level-status"></span>
  <!-- 给select加data-badge属性，值为对应徽章的ID -->
  <select class="form-control" name="choices-single-no-sorting" id="project-tier-entry-level" data-badge="project-tier-entry-level-status">
    <option value="" disabled selected hidden>请选择...</option>
    <option>Yes</option>
    <option>No</option>
  </select>
</div>

对应JS代码 #

const allStatusSelects = document.querySelectorAll('select[data-badge]');
allStatusSelects.forEach(select => {
  select.addEventListener('change', handleBadgeUpdate);
});

function handleBadgeUpdate() {
  const selectedValue = this.options[this.selectedIndex].value;
  // 直接通过自定义属性拿到对应徽章的ID，再查找元素
  const statusBadge = document.getElementById(this.dataset.badge);
  
  if (selectedValue === 'Yes') {
    statusBadge.className = 'badge badge-soft-success';
    statusBadge.textContent = 'Good!';
  } else {
    statusBadge.className = 'badge badge-soft-danger';
    statusBadge.textContent = 'Bad!';
  }
}

两种方案都只需要定义一次函数，后续新增任意数量的同功能表单项都不需要调整JS逻辑。

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