[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

[Kishin]

id powinien być unikalny u Ciebie nie jest, w ifach zapomniałeś o klamrach, change wykonywałes tylko przy zmianie "powierzchni" więc siłą rzeczy nic sie nie działo przy zmianie drugiego selecta.

spróbuj tak:

[PHP] 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 change">
                                  <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  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 change">
                                  <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  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>
 
 
      <script>
          $(document).ready(function () {
            toggleFields(); 
            $(".change").change(function () {
                toggleFields();
            });
         });
 
        function toggleFields() {
            if ($("#material").val() === "2" && $("#powierzchnia").val() === "3")
			{
                $("#powierzchnia").closest('.form-group').show();
                $("#okleina").closest('.form-group').show();
				}
            else if ($("#material").val() === "2" ){
                $("#powierzchnia").closest('.form-group').show();
                $("#okleina").closest('.form-group').hide();
				}
            else{
                $("#powierzchnia").closest('.form-group').hide();
                $("#okleina").closest('.form-group').hide();
 
				}
        }
 
        </script>
 
[PHP] pobierz, plaintext 

Ten post edytował Kishin 30.12.2016, 10:56:14