CODEWITHSUNDEEP
javascripthtmljquery
info.dava
info.dava

Reputation: 41

how to display a specific content on selected option | jQuery

i've this code where i have a specific div i want to show if i selected a specific option

my code is based on this codepen tutorial: https://codepen.io/scanfcode/pen/vZJmQo

however it does not working

$('#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>

in the snippet it's showing an error, but on my console in my code it's not returning any error

the form

it should be showing on the right side of this option (image above)

Upvotes: 3

Views: 242

Answers (1)

biberman
biberman

Reputation: 5767

You just have to remove the change() statement at the end of your change event listener. To initially hide the divs you could simply use the following line from your event handler:

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

Working example

$('#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>

Upvotes: 1

Related Questions