JavaScript更新select选项仅对首个用户ID生效的问题排查

问题 #

在更新功能中用JavaScript实现表单联动：第一个下拉框选择「Ya（值为1）」时，第二个下拉框仅显示ontime、terlambat选项；选择「Tidak（值为0）」时，仅显示sakit、Tanpa Keterangan、ijin选项。但当前代码仅对第一个用户ID的表单生效，其他用户的表单无法触发联动。

问题原因 #

1. ID唯一性冲突：页面中每个用户的表单都会生成相同的ID（如hadir_update、ontime_update等），而document.getElementById()只会匹配页面中第一个出现的元素，导致后续用户的表单无法找到对应的DOM节点。
2. Select2插件的DOM隔离：直接修改<option>的display样式对Select2无效，因为Select2会生成独立的UI DOM结构，原生选项的样式不会同步到插件界面。

修复方案 #

1. 重构HTML：移除重复ID，改用类名+用户上下文 #

把固定ID替换为类名，同时给每个用户的表单容器添加独立标识，确保操作范围限定在当前用户的表单内。

2. 修改JavaScript：基于当前表单上下文查找元素，使用Select2 API控制选项 #

通过触发事件的下拉框定位到所属的表单容器，再在容器内筛选目标元素；同时调用Select2的API同步插件界面状态，避免原生样式修改无效的问题。

修改后的代码 #

HTML部分

<!-- 每个用户的表单容器添加独立标识 -->
<div class="row user-form" data-user-id="{{ $row->id }}" style="margin-bottom: 10px">
  <div class="col-md-2 mb-5">
    <label class="col-md-3 control-label">Kehadiran</label>
    <div class="col-md-3">
      <select name="hadir" class="form-control select2 hadir-select" onchange="absen(this)" required>
        <option selected value="">Pilih Kehadiran</option>
        <option value="1" {{ $row->hadir == '1' ? 'selected' : '' }} >Ya</option>
        <option value="0" {{ $row->hadir == '0' ? 'selected' : '' }} >Tidak</option>
      </select>
    </div>
  </div>
  <div class="col-md-6" style="margin-bottom: 10px">
    <div class="col-md-2">
      <label class="col-md-2 control-label">Keterangan</label>
      <div class="col-md-3">
        <select name="keterangan" class="form-control select2 keterangan-select">
          <option value="">Pilih Keterangan</option>
          <!-- 给选项添加分类类名，方便批量控制 -->
          <option class="type-present" {{ $row->keterangan == 'ontime' ? 'selected' : '' }} value="ontime">On Time</option>
          <option class="type-present" {{ $row->keterangan == 'terlambat' ? 'selected' : '' }} value="terlambat">Terlambat</option>
          <option class="type-absent" {{ $row->keterangan == 'ijin' ? 'selected' : '' }} value="ijin">Ijin</option>
          <option class="type-absent" {{ $row->keterangan == 'sakit' ? 'selected' : '' }} value="sakit">Sakit</option>
          <option class="type-absent" {{ $row->keterangan == 'tk' ? 'selected' : '' }} value="tk">Tanpa Keterangan</option>
        </select>
      </div>
    </div>
  </div>
</div>

JavaScript部分

function absen(el) {
  const selectedValue = el.value;
  // 定位当前用户的表单容器，确保操作只影响当前表单
  const currentForm = el.closest('.user-form');
  const keteranganSelect = currentForm.querySelector('.keterangan-select');
  const select2Instance = $(keteranganSelect).data('select2');

  if (selectedValue === '1') {
    // 显示出勤类选项，隐藏缺勤类选项
    $(keteranganSelect).find('.type-present').show();
    $(keteranganSelect).find('.type-absent').hide();
    // 同步Select2界面状态
    select2Instance.trigger('change');
    // 控制关联元素状态
    $(currentForm).find('#backup').attr("disabled", "disabled");
    $(keteranganSelect).removeAttr("disabled");
  } else if (selectedValue === '0') {
    // 显示缺勤类选项，隐藏出勤类选项
    $(keteranganSelect).find('.type-present').hide();
    $(keteranganSelect).find('.type-absent').show();
    select2Instance.trigger('change');
    $(currentForm).find('#backup').removeAttr("disabled");
    $(keteranganSelect).removeAttr("disabled");
  } else {
    // 重置状态
    $(currentForm).find('#backup').attr("disabled", "disabled");
    $(keteranganSelect).attr("disabled", "disabled");
    $(keteranganSelect).find('option').show();
    select2Instance.trigger('change');
  }
}

// 页面加载时初始化所有表单的联动状态
$(document).ready(function() {
  $('.hadir-select').each(function() {
    absen(this);
  });
});

关键改进点 #

• 用closest('.user-form')限定操作范围，彻底解决ID重复导致的元素匹配错误。
• 通过分类类名批量控制选项可见性，代码更简洁易维护。
• 调用Select2实例的trigger('change')方法，确保插件UI与原生选项状态同步。
• 页面初始化时自动触发联动，解决初始状态选项显示异常的问题。

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