[HTML][JavaScript]Trzy zależne od siebie listy rozwijane Opcje

[Delleg]

Chciałbym w swoim formularzu uzyskać efekt ukrywania/pokazywania pól list w następujący sposób:
Jeśli użytkownik wybierze z pierwszej listy Sosnowa ma mu się pokazać pole listy powierzchnia i nic więcej. Jeśli z listy powierzchnia wybierze wartość okleinowana dopiero wtedy i tylko wtedy ma mieć dostęp do listy okleina.

[HTML] pobierz, plaintext 
<div class="form-group">
                              <label class="col-md-2 control-label" for="material">Kategoria</label>
                              <div class="col-md-2">
                                <select id="material" name="material" class="form-control">
                                  <option value="1">Dębowa</option>
                                  <option value="2">Sosnowa</option>
                                  <option value="3">Topolowa</option>
                                  <option value="4">Oleinowana</option>
                                </select>
                              </div>
                            </div>
                            <div id="powierzchnia" class="form-group">
                              <label class="col-md-2 control-label" for="powierzchnia">Powierzchnia</label>
                              <div class="col-md-2">
                                <select id="powierzchnia" name="powierzchnia" class="form-control">
                                  <option value="1">surowa</option>
                                  <option value="2">nieokleinowana</option>
                                  <option value="3">okleinowana</option>
                                  <option value="4">malowana</option>
                                  <option value="5">decor</option>
                                </select>
                              </div>
                            </div>
                            <div id="okleina" class="form-group">
                              <label class="col-md-2 control-label" for="okleina">Okleinowana</label>
                              <div class="col-md-2">
                                <select id="okleina" name="okleina" class="form-control">
                                  <option value="1">sosną</option>
                                  <option value="2">brzozą</option>
                                  <option value="3">topolą</option>
                                  <option value="4">jaworem</option>
                                  <option value="5">jesionem</option>
                                  <option value="6">dębem</option>
                                  <option value="7">orzechem</option>
                                  <option value="8">czereśnią</option>
                                </select>
                              </div>
                            </div>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
    <script>
  $(document).ready(function () {
    toggleFields(); 
    $("#material").change(function () {
        toggleFields();
    });
 
});
function toggleFields() {
    if ($("#material").val() === "2")
        $("#powierzchnia").show();
    else if ($("material").val() === "2" && $("#powierzchnia").val() === "3" )
        $("#powierzchnia").show();
    else
        $("#powierzchnia").hide();
        $("#okleina").hide();
}
    </script>
[JAVASCRIPT] pobierz, plaintext 

Mam problem z trzecim polem, nie chce się pokazać

Ten post edytował Delleg 29.12.2016, 12:35:29