javascript - 如何在所选选项上显示特定内容 |查询

Question

我在这段代码中有一个特定的 div，如果我选择了一个特定的选项，我想显示它

我的代码基于此 codepen 教程:https://codepen.io/scanfcode/pen/vZJmQo

但是它不起作用

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

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

<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>

在代码片段中它显示错误，但在我的代码控制台上它没有返回任何错误

the form

它应该显示在这个选项的右侧(上图)

Answer 1

您只需删除 change 事件监听器末尾的 change() 语句。要最初隐藏 div，您可以简单地使用事件处理程序中的以下行:

$(".hide").hide();

工作示例

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

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

$(".hide").hide();

<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>