how to display a specific content on selected option

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 >
  <label>Layanan yang Digunakan</label>
  <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  id="SPEKTRA">
  <label>Pilih Jenis Pembiayaan</label>
  <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  id="type"></span>
</div>

<div  id="DANASTRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select  name="type">
    <option value="Pembiayaan Multiguna" selected>Pembiayaan Multiguna</option>
  </select>
  <span  id="type"></span>
</div>

<div  id="FIFASTRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select  name="type">
    <option value="Pembiayaan Motor Honda" selected>Pembiayaan Motor Honda</option>
  </select>
  <span  id="type"></span>
</div>


<div  id="FINATRA">
  <label>Pilih Jenis Pembiayaan</label>
  <select  name="type">
    <option value="Pembiayaan Produktif Usaha Mikro" selected>Pembiayaan Produktif Usaha Mikro</option>
  </select>
  <span  id="type"></span>
</div>


<div  id="FLEET">
  <label>Pilih Jenis Pembiayaan</label>
  <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  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)

CodePudding user response：

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 >
  <label>Layanan yang Digunakan</label>
  
  <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  id="SPEKTRA">
  <label>Pilih Jenis Pembiayaan</label>
  
  <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  id="type"></span>
</div>

<div  id="DANASTRA">
  <label>Pilih Jenis Pembiayaan</label>
  
  <select  name="type">
    <option value="Pembiayaan Multiguna" selected>Pembiayaan Multiguna</option>
  </select>
  
  <span  id="type"></span>
</div>

<div  id="FIFASTRA">
  <label>Pilih Jenis Pembiayaan</label>
  
  <select  name="type">
    <option value="Pembiayaan Motor Honda" selected>Pembiayaan Motor Honda</option>
  </select>
  
  <span  id="type"></span>
</div>


<div  id="FINATRA">
  <label>Pilih Jenis Pembiayaan</label>
  
  <select  name="type">
    <option value="Pembiayaan Produktif Usaha Mikro" selected>Pembiayaan Produktif Usaha Mikro</option>
  </select>
  
  <span  id="type"></span>
</div>


<div  id="FLEET">
  <label>Pilih Jenis Pembiayaan</label>
  
  <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  id="type"></span>
</div>