Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]Trzy zależne od siebie listy rozwijane
Forum PHP.pl > Forum > Przedszkole
Delleg
29.12.2016, 12:32:36
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 
  1. <div class="form-group">
  2.                               <label class="col-md-2 control-label" for="material">Kategoria</label>
  3.                               <div class="col-md-2">
  4.                                 <select id="material" name="material" class="form-control">
  5.                                   <option value="1">Dębowa</option>
  6.                                   <option value="2">Sosnowa</option>
  7.                                   <option value="3">Topolowa</option>
  8.                                   <option value="4">Oleinowana</option>
  9.                                 </select>
  10.                               </div>
  11.                             </div>
  12.                             <div id="powierzchnia" class="form-group">
  13.                               <label class="col-md-2 control-label" for="powierzchnia">Powierzchnia</label>
  14.                               <div class="col-md-2">
  15.                                 <select id="powierzchnia" name="powierzchnia" class="form-control">
  16.                                   <option value="1">surowa</option>
  17.                                   <option value="2">nieokleinowana</option>
  18.                                   <option value="3">okleinowana</option>
  19.                                   <option value="4">malowana</option>
  20.                                   <option value="5">decor</option>
  21.                                 </select>
  22.                               </div>
  23.                             </div>
  24.                             <div id="okleina" class="form-group">
  25.                               <label class="col-md-2 control-label" for="okleina">Okleinowana</label>
  26.                               <div class="col-md-2">
  27.                                 <select id="okleina" name="okleina" class="form-control">
  28.                                   <option value="1">sosną</option>
  29.                                   <option value="2">brzozą</option>
  30.                                   <option value="3">topolą</option>
  31.                                   <option value="4">jaworem</option>
  32.                                   <option value="5">jesionem</option>
  33.                                   <option value="6">dębem</option>
  34.                                   <option value="7">orzechem</option>
  35.                                   <option value="8">czereśnią</option>
  36.                                 </select>
  37.                               </div>
  38.                             </div>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1.     <script>
  2.   $(document).ready(function () {
  3.     toggleFields(); 
  4.     $("#material").change(function () {
  5.         toggleFields();
  6.     });
  7.  
  8. });
  9. function toggleFields() {
  10.     if ($("#material").val() === "2")
  11.         $("#powierzchnia").show();
  12.     else if ($("material").val() === "2" && $("#powierzchnia").val() === "3" )
  13.         $("#powierzchnia").show();
  14.     else
  15.         $("#powierzchnia").hide();
  16.         $("#okleina").hide();
  17. }
  18.     </script>
[JAVASCRIPT] pobierz, plaintext


Mam problem z trzecim polem, nie chce się pokazać
Kishin
29.12.2016, 14:05:16
Po pierwsze nigdzie nie robisz na niego show

podejrzewam, że chciałeś go wrzucić tutaj
[PHP] pobierz, plaintext 
  1.  else if ($("material").val() === "2" && $("#powierzchnia").val() === "3" )
  2.         $("#powierzchnia").show();
[PHP] pobierz, plaintext


także tu sobie popraw.
Oprócz tego ten warunek nigdy Ci sie nie wykona bo jeżeli $("material").val() === "2" to wykona sie działanie z pierwszego ifa i na tym koniec, dalej nie sprawdza. Także musisz sobie jeszcze zmienić kolejność ifów i powinno działać.



Delleg
29.12.2016, 22:43:09 
[JAVASCRIPT] pobierz, plaintext 
  1.  <script>
  2.       $(document).ready(function () {
  3.         toggleFields(); 
  4.         $("#material").change(function () {
  5.             toggleFields();
  6.         });
  7.      });
  8.     function toggleFields() {
  9.         if ($("#material").val() === "2" && $("#powierzchnia").val() === "3")
  10.             $("#powierzchnia").show();
  11.             $("#okleina").show();
  12.         else if ($("#material").val() === "2" )
  13.             $("#powierzchnia").show();
  14.         else
  15.             $("#powierzchnia").hide();
  16.             $("#okleina").hide();
  17.     }
  18.  
  19.     </script>
[JAVASCRIPT] pobierz, plaintext

Nie wiem czy dobrze zrozumiałem, ale to i tak nie działa
Kishin
30.12.2016, 10:55:16
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 
  1.  
  2. <div class="form-group">
  3.                               <label class="col-md-2 control-label" for="material">Kategoria</label>
  4.                               <div class="col-md-2">
  5.                                 <select id="material" name="material" class="form-control change">
  6.                                   <option value="1">Dębowa</option>
  7.                                   <option value="2">Sosnowa</option>
  8.                                   <option value="3">Topolowa</option>
  9.                                   <option value="4">Oleinowana</option>
  10.                                 </select>
  11.                               </div>
  12.                             </div>
  13.                             <div  class="form-group">
  14.                               <label class="col-md-2 control-label" for="powierzchnia">Powierzchnia</label>
  15.                               <div class="col-md-2">
  16.                                 <select id="powierzchnia" name="powierzchnia" class="form-control change">
  17.                                   <option value="1">surowa</option>
  18.                                   <option value="2">nieokleinowana</option>
  19.                                   <option value="3">okleinowana</option>
  20.                                   <option value="4">malowana</option>
  21.                                   <option value="5">decor</option>
  22.                                 </select>
  23.                               </div>
  24.                             </div>
  25.                             <div  class="form-group">
  26.                               <label class="col-md-2 control-label" for="okleina">Okleinowana</label>
  27.                               <div class="col-md-2">
  28.                                 <select id="okleina" name="okleina" class="form-control">
  29.                                   <option value="1">sosną</option>
  30.                                   <option value="2">brzozą</option>
  31.                                   <option value="3">topolą</option>
  32.                                   <option value="4">jaworem</option>
  33.                                   <option value="5">jesionem</option>
  34.                                   <option value="6">dębem</option>
  35.                                   <option value="7">orzechem</option>
  36.                                   <option value="8">czereśnią</option>
  37.                                 </select>
  38.                               </div>
  39.                             </div>
  40.  
  41.  
  42.       <script>
  43.           $(document).ready(function () {
  44.             toggleFields(); 
  45.             $(".change").change(function () {
  46.                 toggleFields();
  47.             });
  48.          });
  49.  
  50.         function toggleFields() {
  51.             if ($("#material").val() === "2" && $("#powierzchnia").val() === "3")
  52. 			{
  53.                 $("#powierzchnia").closest('.form-group').show();
  54.                 $("#okleina").closest('.form-group').show();
  55. 				}
  56.             else if ($("#material").val() === "2" ){
  57.                 $("#powierzchnia").closest('.form-group').show();
  58.                 $("#okleina").closest('.form-group').hide();
  59. 				}
  60.             else{
  61.                 $("#powierzchnia").closest('.form-group').hide();
  62.                 $("#okleina").closest('.form-group').hide();
  63.  
  64. 				}
  65.         }
  66.  
  67.         </script>
  68.  
[PHP] pobierz, plaintext
Delleg
30.12.2016, 11:54:24
Działa!, dziękuje za pomoc smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.