Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]Nie działają zależne listy rozwijane
Forum PHP.pl > Forum > Przedszkole
saviola15
1.07.2013, 14:11:15
Witam http://pneumaticon.pl/sil/index.php Nie działa rozwijany select:

Index 
[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/select.js"></script>
  4.  
  5. </head>
  6. <body>
  7. <form action="select.php" id="formularz" action="post">
  8.  
  9. 	<fieldset>
  10. 		<legend>Kategorie</legend>
  11. 		<select id="kategorie">
  12. 			<option value="1">Kategoria 1</option>
  13. 			<option value="2">Kategoria 2</option>
  14. 			<option value="3">Kategoria 3</option>
  15. 			<option value="4">Kategoria 4</option>
  16. 		</select>
  17. 	</fieldset>
  18. </form>
  19. </body>
  20.  
  21. </html>
[PHP] pobierz, plaintext


select.php 
[PHP] pobierz, plaintext 
  1. <?
  2.  
  3. if(!empty($_GET['id'])) {
  4.     $id = $_GET['id'];
  5.     switch($id) {
  6.         case 1:
  7.             $tab = array(
  8.                 '11'=>'Kategoria 1.1',
  9.                 '12'=>'Kategoria 1.2',
  10.                 '13'=>'Kategoria 1.3'
  11.             );
  12.             echo json_encode($tab);
  13.             break;
  14.         case 2:
  15.             $tab = array(
  16.                 '21'=>'Kategoria 2.1',
  17.                 '22'=>'Kategoria 2.2',
  18.                 '23'=>'Kategoria 2.3',
  19.                 '24'=>'Kategoria 2.4'
  20.             );
  21.             echo json_encode($tab);
  22.             break;
  23.         case 3:
  24.             $tab = array(
  25.                 '31'=>'Kategoria 3.1',
  26.                 '32'=>'Kategoria 3.2'
  27.             );
  28.             echo json_encode($tab);
  29.             break;
  30.         case 4:
  31.             $tab = array(
  32.                 '41'=>'Kategoria 4.1',
  33.                 '42'=>'Kategoria 4.2',
  34.                 '43'=>'Kategoria 4.3'
  35.             );
  36.             echo json_encode($tab);
  37.             break;
  38.         default:
  39.             $tab = array('0'=>'Brak');
  40.             echo json_encode($tab);
  41.             break;
  42.     }
  43. }
  44.  
  45. ?>
[PHP] pobierz, plaintext


select.js

[PHP] pobierz, plaintext 
  1. //select.js
  2. //skrypt będzie uruchamiany gdy strona się całkowicie załaduje
  3. $(document).ready(function() {
  4.  
  5.     //przypisanie akcji wywołania dodatkowej listy do zdarzenia typu change
  6.     $('#kategorie').live('change', function(){
  7.         var id = $(this).val();
  8.  
  9.         //adres url do pliku PHP z kodem generującym dane w formacie JSON
  10.         var url = 'select.php?id='+id;
  11.  
  12.         //jeśli istnieje już select-lista o id: podkategorie, to usuń ją
  13.         if($('#podkategorie').length>0)
  14.             $('#podkategorie').remove();
  15.  
  16.         //metoda pobierająca dane JSON z podanego adresu w zmiennej url
  17.         $.getJSON(
  18.             url,
  19.             function(data){
  20.  
  21.                 //tworzymy nową, pustą listę select o id: podkategorie i ją dołączamy do formularza
  22.                 select = '<select id="podkategorie"></select>';
  23.                 $('#formularz fieldset').append(select);
  24.                 var lista = $('#podkategorie');
  25.  
  26.                 //ukrywamy listę. Potrzebne to będzie do uzyskania animacji pojawienia się elementu na stronie
  27.                 lista.hide();
  28.  
  29.                 //generowanie kolejnych opcji listy
  30.                 $.each(data, function(key, val){
  31.                     var option = $('<option/>');
  32.                     option.attr('value', key)
  33.                           .html(val)
  34.                           .appendTo(lista);
  35.                 });
  36.  
  37.                 //animacja pojawienia się elementu na stronie
  38.                 lista.show('scale', 500);
  39.             },
  40.             'json'
  41.         );
  42.     })
  43. })
[PHP] pobierz, plaintext
b4rt3kk
1.07.2013, 14:24:02
Skoro używasz jQuery może byś tak ową bibliotekę dołączył? Sama tego nie zrobi.
saviola15
1.07.2013, 14:32:05
Jak dołączyć takową bibliotekę ? Może masz jakiś fajny tutriolal jak to zrobić ? Bo trochę szukałem w necie i nic nie umiem konkretnego znaleźć... sad.gif
b4rt3kk
1.07.2013, 14:35:35
To jak ten skrypt napisałeś jak pierwszy raz o jQuery słyszysz? W sekcji HEAD dorzuć:

[HTML] pobierz, plaintext 
  1. <head>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  3. <script type="text/javascript" src="/select.js"></script>
  4. </head>
[HTML] pobierz, plaintext
saviola15
1.07.2013, 14:49:15
Serwer ftp mi chwilowo nie odpowiada na pneumaticon to wrzuciłem to na http://kluczeudarowe.pl/sil/index.php i nadal nie działa sad.gif
lobopol
1.07.2013, 15:42:47
Bo teraz nie dołączasz tego select.js
b4rt3kk
1.07.2013, 23:16:46
Tak jak kolega wyżej wspomniał, ścieżka do select.js jest niepoprawna.
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.