如何通过jQuery实现选中指定选项时显示对应内容？

问题 #

我参考教程写了一段代码，想要实现选中id为select_service的下拉框选项时，显示对应id的div内容，但代码无法正常运行。本地控制台没有报错，目标内容应该显示在选项右侧（参考效果：下拉选单右侧展示对应表单区域）。以下是我的代码：

原JS代码 #

$('#select_service').change(function() {
  var select = $(this).find('option:selected').val();
  console.log(select);

  $(".hide").hide();
  $('#' + select).show();
}).change();

原HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group">
  <label>Layanan yang Digunakan</label>
  <select class="custom-select" id="select_service" name="service">
    <option value="0" disabled>Pilih:</option>
    <option value="FIFASTRA">FIFASTRA</option>
    <option value="SPEKTRA">SPEKTRA</option>
    <option value="DANASTRA">DANASTRA</option>
    <option value="AMITRA">AMITRA</option>
    <option value="FINATRA">FINATRA</option>
    <option value="FLEET">FLEET</option>
  </select>
</div>

<br> //content i want to show based on value
<div class="form-group hide" id="SPEKTRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan Elektronik">Pembiayaan Elektronik</option>
    <option value="Pembiayaan Furniture">Pembiayaan Furniture</option>
    <option value="Pembiayaan Gadget">Pembiayaan Gadget</option>
  </select>
  <span class="message" id="type"></span>
</div>

<div class="form-group hide" id="DANASTRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan Multiguna" selected>Pembiayaan Multiguna</option>
  </select>
  <span class="message" id="type"></span>
</div>

<div class="form-group hide" id="FIFASTRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan Motor Honda" selected>Pembiayaan Motor Honda</option>
  </select>
  <span class="message" id="type"></span>
</div>

<div class="form-group hide" id="FINATRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan Produktif Usaha Mikro" selected>Pembiayaan Produktif Usaha Mikro</option>
  </select>
  <span class="message" id="type"></span>
</div>

<div class="form-group hide" id="FLEET">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan Group Customer">Pembiayaan Group Customer</option>
    <option value="Pembiayaan Corporate Operational">Pembiayaan Corporate Operational</option>
    <option value="Pembiayaan Employee Benefit">Pembiayaan Employee Benefit</option>
  </select>
  <span class="message" id="type"></span>
</div>

问题排查与修复 #

代码存在以下几个问题导致功能异常：

1. 初始触发逻辑错误：页面加载时默认选中value="0"的禁用选项，调用.change()会尝试显示不存在的id="0"元素，且无有效内容展示。
2. 缺失对应元素：下拉选项包含AMITRA，但无匹配的id="AMITRA"的div，选中该选项时无内容可显示。
3. HTML注释错误：使用JS注释语法//在HTML中，导致解析异常。
4. 重复ID：多个<span>使用相同id="type"，违反ID唯一性规则，会引发DOM操作冲突。
5. 布局缺失：未添加CSS实现内容在选项右侧显示的布局。

修复后的完整代码 #

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group">
  <label>Layanan yang Digunakan</label>
  <select class="custom-select" id="select_service" name="service">
    <option value="" selected disabled>Pilih:</option>
    <option value="FIFASTRA">FIFASTRA</option>
    <option value="SPEKTRA">SPEKTRA</option>
    <option value="DANASTRA">DANASTRA</option>
    <option value="AMITRA">AMITRA</option>
    <option value="FINATRA">FINATRA</option>
    <option value="FLEET">FLEET</option>
  </select>
</div>

<br><!-- content i want to show based on value -->
<div class="form-group hide" id="SPEKTRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan Elektronik">Pembiayaan Elektronik</option>
    <option value="Pembiayaan Furniture">Pembiayaan Furniture</option>
    <option value="Pembiayaan Gadget">Pembiayaan Gadget</option>
  </select>
  <span class="message" id="type_spektra"></span>
</div>

<div class="form-group hide" id="DANASTRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan Multiguna" selected>Pembiayaan Multiguna</option>
  </select>
  <span class="message" id="type_danastra"></span>
</div>

<div class="form-group hide" id="FIFASTRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan Motor Honda" selected>Pembiayaan Motor Honda</option>
  </select>
  <span class="message" id="type_fifastra"></span>
</div>

<div class="form-group hide" id="FINATRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan Produktif Usaha Mikro" selected>Pembiayaan Produktif Usaha Mikro</option>
  </select>
  <span class="message" id="type_finatra"></span>
</div>

<div class="form-group hide" id="FLEET">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan Group Customer">Pembiayaan Group Customer</option>
    <option value="Pembiayaan Corporate Operational">Pembiayaan Corporate Operational</option>
    <option value="Pembiayaan Employee Benefit">Pembiayaan Employee Benefit</option>
  </select>
  <span class="message" id="type_fleet"></span>
</div>

<!-- 补充AMITRA对应内容 -->
<div class="form-group hide" id="AMITRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select class="custom-select" name="type">
    <option value="Pembiayaan AMITRA" selected>Pembiayaan AMITRA</option>
  </select>
  <span class="message" id="type_amitra"></span>
</div>

CSS代码（实现右侧布局） #

.form-group {
  display: inline-block;
  margin-right: 20px;
  vertical-align: top;
}
.hide {
  display: none;
}

JavaScript代码 #

$('#select_service').change(function() {
  var selectedValue = $(this).val();
  console.log(selectedValue);

  $(".hide").hide();
  // 仅选中有效选项时展示对应内容
  if (selectedValue) {
    $('#' + selectedValue).show();
  }
});

关键修复说明 #

1. 调整初始触发逻辑：移除初始.change()调用，将默认选项value设为空字符串，避免无效触发。
2. 补充缺失元素：添加id="AMITRA"的div，确保所有下拉选项都有匹配内容。
3. 修复注释：将JS注释改为标准HTML注释格式，避免解析错误。
4. 唯一化ID：修改所有重复的id="type"为唯一ID，避免DOM操作冲突。
5. 添加布局样式：通过inline-block实现下拉选单与内容区域的横向排列，满足右侧显示需求。

内容的提问来源于stack exchange，提问作者info.dava