Laravel 9中jQuery联动Select Option异常问题求助

云上老周

2026-8-10

表单异常问题排查

问题描述

制作数据设置表单时，预期选择「按部门（By Departemen）」并选中IT部门后流程结束，但实际点击部门选项时，却显示了仅应在「按员工标签（By Tags Karyawan）」模式下出现的员工标签下拉框。

截图说明

分配模式表单展示
选择按部门后的显示效果
部门名称的取值
点击部门后显示员工标签的异常效果
员工标签下拉框的正确展示场景

原代码片段

JavaScript 代码

$(function() {
  $('#mode_company').prop("hidden", true);
  $('#mode_departemen').prop("hidden", true);
  $('#mode_employee').prop("hidden", true);
  $('#jk_employee').prop("hidden", true);
  $('#sm_employee').prop("hidden", true);

  $('#modealokasi').on('change', function(e) {
    if (e.target.value == 'By Karyawan') {
      $('#mode_company').prop("hidden", true);
      $('#mode_departemen').prop("hidden", true);
      $('#mode_employee').prop("hidden", false);

      $('#mode_employee').on('change', function(a) {
        if (a.target.value == 'Jenis Kelamin') {
          $('#jk_employee').prop("hidden", false);
          $('#sm_employee').prop("hidden", true);
        } else {
          $('#jk_employee').prop("hidden", true);
          $('#sm_employee').prop("hidden", false);
        };
      });
    } else if (e.target.value == 'By Company') {
      $('#mode_company').prop("hidden", false);
      $('#mode_departemen').prop("hidden", true);
      $('#mode_employee').prop("hidden", true);
    } else {
      $('#mode_company').prop("hidden", true);
      $('#mode_departemen').prop("hidden", false);
      $('#mode_employee').prop("hidden", true);
    }
  });
});

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6" id="modealokasi">
  <div class="form-group">
    <div class="form-group col-sm" id="modealokasi">
      <label for="mode" class="col-form-label">Mode Alokasi</label>
      <select name="mode" id="mode" class="form-control">
        <option value="">-- Pilih Mode Alokasi --</option>
        <option value="By Company">By Company</option>
        <option value="By Departemen">By Departemen</option>
        <option value="By Karyawan">By Tags Karyawan</option>
      </select>
    </div>
  </div>
  <div class="form-group col-sm" id="mode_company">
    <label for="company" class="col-form-label">Company</label>
    <select name="company" id="company" class="form-control">
      <option value="">-- Pilih Company --</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
  <div class="form-group col-sm" id="mode_departemen">
    <label for="id_departemen" class="col-form-label">Departemen</label>
    <select name="id_departemen" id="id_departemen" class="form-control">
      <option value="">-- Pilih Departemen --</option>
      <option value="KONVENSIONAL">KONVENSIONAL</option>
      <option value="IT DEPARTEMEN">IT DEPARTEMEN</option>
      <option value="KEUANGAN">KEUANGAN</option>
    </select>
  </div>
  <div class="form-group col-sm" id="mode_employee">
    <label for="tags" class="col-form-label">Tags Karyawan</label>
    <select name="tags" id="tags" class="form-control">
      <option value="">-- Pilih Tags --</option>
      <option value="Jenis Kelamin">Jenis Kelamin</option>
      <option value="Status">Status</option>
    </select>
  </div>
  <div class="form-group col-sm" id="jk_employee">
    <label for="tags" class="col-form-label">Jenis Kelamin</label>
    <select name="tags" id="tags" class="form-control">
      <option value="">-- Pilih Jenis Kelamin --</option>
      <option value="Laki-laki">Laki-laki</option>
      <option value="Perempuan">Perempuan</option>
    </select>
  </div>

  <div class="form-group col-sm" id="sm_employee">
    <label for="tags" class="col-form-label">Stat. Menikah</label>
    <select name="tags" id="tags" class="form-control">
      <option value="">-- Pilih Status Menikah --</option>
      <option value="Sudah">Sudah</option>
      <option value="Belum">Belum</option>
    </select>
  </div>
</div>

错误原因

重复ID绑定事件：HTML中存在两个id="modealokasi"的元素（外层div和内部form-group div），导致change事件绑定到了外层div上。当点击部门下拉框时，事件冒泡到外层div，触发了原本只应在切换分配模式时执行的逻辑，意外显示员工标签区域。
事件重复绑定：每次切换到「By Karyawan」模式时，都会重新绑定#mode_employee的change事件，导致事件堆积，增加意外触发的概率。
重复ID冲突：多个下拉框使用相同的id="tags"，会导致DOM选择和事件绑定出现不可预期的错误。

修复方案

修复后的JavaScript代码

$(function() {
  // 初始化隐藏所有区域，简化写法
  $('#mode_company, #mode_departemen, #mode_employee, #jk_employee, #sm_employee').prop("hidden", true);

  // 绑定到正确的分配模式下拉框#mode，而非div
  $('#mode').on('change', function(e) {
    const selectedMode = e.target.value;
    // 先统一隐藏所有区域，避免残留显示
    $('#mode_company, #mode_departemen, #mode_employee, #jk_employee, #sm_employee').prop("hidden", true);

    switch(selectedMode) {
      case 'By Karyawan':
        $('#mode_employee').prop("hidden", false);
        break;
      case 'By Company':
        $('#mode_company').prop("hidden", false);
        break;
      case 'By Departemen':
        $('#mode_departemen').prop("hidden", false);
        break;
    }
  });

  // 将员工标签的change事件移到外层，仅绑定一次
  $('#mode_employee').on('change', function(a) {
    if (a.target.value == 'Jenis Kelamin') {
      $('#jk_employee').prop("hidden", false);
      $('#sm_employee').prop("hidden", true);
    } else {
      $('#jk_employee').prop("hidden", true);
      $('#sm_employee').prop("hidden", false);
    }
  });
});

修复后的HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="form-group">
    <div class="form-group col-sm">
      <label for="mode" class="col-form-label">分配模式</label>
      <select name="mode" id="mode" class="form-control">
        <option value="">-- 选择分配模式 --</option>
        <option value="By Company">按公司</option>
        <option value="By Departemen">按部门</option>
        <option value="By Karyawan">按员工标签</option>
      </select>
    </div>
  </div>
  <div class="form-group col-sm" id="mode_company">
    <label for="company" class="col-form-label">公司</label>
    <select name="company" id="company" class="form-control">
      <option value="">-- 选择公司 --</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </div>
  <div class="form-group col-sm" id="mode_departemen">
    <label for="id_departemen" class="col-form-label">部门</label>
    <select name="id_departemen" id="id_departemen" class="form-control">
      <option value="">-- 选择部门 --</option>
      <option value="KONVENSIONAL">KONVENSIONAL</option>
      <option value="IT DEPARTEMEN">IT部门</option>
      <option value="KEUANGAN">财务部门</option>
    </select>
  </div>
  <div class="form-group col-sm" id="mode_employee">
    <label for="tags_employee" class="col-form-label">员工标签</label>
    <select name="tags_employee" id="tags_employee" class="form-control">
      <option value="">-- 选择标签 --</option>
      <option value="Jenis Kelamin">性别</option>
      <option value="Status">婚姻状态</option>
    </select>
  </div>
  <div class="form-group col-sm" id="jk_employee">
    <label for="tags_gender" class="col-form-label">性别</label>
    <select name="tags_gender" id="tags_gender" class="form-control">
      <option value="">-- 选择性别 --</option>
      <option value="Laki-laki">男</option>
      <option value="Perempuan">女</option>
    </select>
  </div>

  <div class="form-group col-sm" id="sm_employee">
    <label for="tags_marital" class="col-form-label">婚姻状态</label>
    <select name="tags_marital" id="tags_marital" class="form-control">
      <option value="">-- 选择婚姻状态 --</option>
      <option value="Sudah">已婚</option>
      <option value="Belum">未婚</option>
    </select>
  </div>
</div>

修复要点

移除重复的id="modealokasi"，将事件绑定到具体的下拉框#mode，避免事件冒泡触发错误逻辑。
将#mode_employee的change事件移到外层，仅绑定一次，避免事件堆积。
修复所有重复的id（如tags），确保每个DOM元素的ID唯一，避免选择器冲突。
统一初始化和切换时的区域隐藏逻辑，避免残留显示问题。

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

Laravel 9中jQuery联动Select Option异常问题求助

问题描述 #

截图说明 #

原代码片段 #

JavaScript 代码 #

HTML 代码 #

错误原因 #

修复方案 #

修复后的JavaScript代码 #

修复后的HTML代码 #

修复要点 #

问题描述

截图说明

原代码片段

JavaScript 代码

HTML 代码

错误原因

修复方案

修复后的JavaScript代码

修复后的HTML代码

修复要点