[JavaScript][HTML]Show/Hide diva na podstawie wybranej opcji dropdown Opcje

[Leilang]

Hej, mam problem z zapętleniem funkcji wyświetlającej konkretnego diva na podstawie wybranej opcji w dropdown. Ma to działać tak, że po wybraniu jakiejś opcji w dropdown pokaże się kolejny dropdown i znowu po wybraniu w nim opcji pokaże się następny.

Aktualnie działa tak, że po wybraniu opcji w pierwszym dropdown, pokazuje się kolejny ale następnego już brakuje. Myślę, że powinienem jakoś połączyć tą funkcje, tylko jak ? Będę wdzięczny za pomoc (IMG:style_emoticons/default/smile.gif) .

[PHP] pobierz, plaintext 
$(document).ready(function(){
    $('#kategoria').on('change', function() {
      if ( this.value == '1')
      {
        $("#banery").show();
      }
      else
      {
        $("#banery").hide();
      }
    });
 
    $('#banery').on('change', function() {
      if ( this.value == '1')
      {
        $("#obrobka1").show();
      }
      else
      {
        $("#obrobka1").hide();
      }
    });
});
[PHP] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
    <div  class="caloscFORM" style = "font-family: 'Fira Sans', sans-serif; text-align: center;"; >
 
 
<!-- kategoria ------------------------------------------------------------------------------------------------------>	 
 
 
	 <select id='kategoria' class="btn btn-danger dropdown-toggle"   name="kategoria" class="required-entry" style = "font-family: 'Fira Sans', sans-serif; font-size:19px;  text-align: center;";>
<option value="0">Wybierz kategorię</option>		
<option value="1">Banery</option>
<option value="2">Folia</option>
<option value="3">Papier</option>
<option value="4">Papier</option>
</select>
 
 
<!-- materiał ------------------------------------------------------------------------------------------------------>	 
 
     <div style="display:none; font-family: 'Fira Sans', sans-serif; font-size:19px;  text-align: center;"; id='banery' ><br/><br>
<p style="display: inline">Materiał</p>
<select id='banery' class="btn btn-danger dropdown-toggle"   name="banery" class="required-entry" value="Wybierz rodzaj">
<option value="0">Wybierz rodzaj</option>		
<option value="1">Frontlit z czarnym tyłem</option>
<option value="2">Siatka HEYWINKIEL</option>
<option value="3">Roltex GW 720dpi</option>
<option value="4">Plandeka</option>
<option value="5">Artist Heavy 720dpi</option>
<option value="6">Blockout Roll'up 720dpi z kasetą</option>
<option value="7">Baner Odblaskowy 360dpi</option>
<option value="8">Backlite 360dpi</option>
<option value="9">Blockout Roll-up 720dpi</option>
<option value="10">Blockout dwustronny 360dpi</option>
<option value="11">Blockout jednostronny 360dpi</option>
<option value="12">Siatka (mesh) 360dpi</option>
<option value="13">Frontlit Laminowany 360dpi</option>
<option value="14">Frontlit 720dpi</option>
<option value="15">Frontlit 360dpi</option>
 
</select>
     </div>
 
 
 
<!-- OBRÓBKA ------------------------------------------------------------------------------------------------------>	 
 
<div style="display:none; font-family: 'Fira Sans', sans-serif; font-size:19px;  text-align: center;"; id='obrobka1' ><br/><br>
<p style="display: inline">Obróbka</p>
<select id='obrobka1' class="btn btn-danger dropdown-toggle"   name="obrobka1" class="required-entry" value="Wybierz obróbkę">
<option value="0">Wybierz obróbkę</option>		
<option value="1">Docięcie</option>
<option value="2">Zgrzew/Tunel/Docięcie/Szycie</option>
 
</select>
     </div>	 
[HTML] pobierz, plaintext 

Link do fiddla: fiddle

Ten post edytował Leilang 10.10.2018, 14:38:01

[werdan]

http://jsfiddle.net/0fqp6k9m/4/

id powinny być unikalne.

[Leilang]

Dziękuje, działa ! (IMG:style_emoticons/default/wink.gif)