Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]wybór kategorii ala alegro
Forum PHP.pl > Forum > Przedszkole
miras
9.02.2014, 11:43:56
Witam, googlowałem trochę i nie za bardzo pomogło, potrzebuję zrobić dynamiczny wybór kategorii ala allegro, 4 poziomowe menu, ma ktoś może jakiś link do tutoriala czy cos ?

Dzięki z góry!
markonix
9.02.2014, 12:19:18
Zdefiniuj dynamiczny, bo na Allegro przy kategoriach nie widzę żadnej "dynamiki", od tak zwykła struktura drzewkowa.
miras
9.02.2014, 12:28:30
Dynamiczny - w sensie chodziło mi, aby było to bez przeładowywania strony.
Turson
9.02.2014, 13:05:09
Chodzi ci o to, że masz np. <select> z markami samochodów i po wybraniu danej marki w innym selectcie pokazują się modele odpowiednie dla marki?
onchange
miras
9.02.2014, 13:21:23
Ok, poradziłem, pozostaje tylko problem taki, że wyświetla mi tylko 1 podkategorię, a poziomu 3 i 4 już nie..

select.php

[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. $connection = @mysql_connect('xx', 'xx', 'xx') 
  4. or die('Brak połączenia z serwerem MySQL.<br />Błąd: '.mysql_error()); 
  5. $db = @mysql_select_db('xx', $connection) 
  6. or die('Nie mogę połączyć się z bazą danych<br />Błąd: '.mysql_error()); 
  7.  
  8. if(!empty($_GET['id'])) {
  9.     $id = $_GET['id'];
  10.  
  11. 	$kat = mysql_query("SELECT * FROM xx WHERE children='$id'");
  12.  
  13. 	while ($row = mysql_fetch_assoc($kat)) {
  14.            $tab = array($row['id']=>$row['name']);
  15. 	}
  16.  
  17. 	  echo json_encode($tab);
  18. }
  19.  
  20.  
  21. ?>
  22.  
[PHP] pobierz, plaintext



select.js
[HTML] pobierz, plaintext 
  1. //skrypt będzie uruchamiany gdy strona się całkowicie załaduje
  2. $(document).ready(function() {
  3.  
  4.     //przypisanie akcji wywołania dodatkowej listy do zdarzenia typu change
  5.     $('#kategorie').live('change', function(){
  6.         var id = $(this).val();
  7.  
  8.         //adres url do pliku PHP z kodem generującym dane w formacie JSON
  9.         var url = 'select.php?id='+id;
  10.  
  11.         //jeśli istnieje już select-lista o id: podkategorie, to usuń ją
  12.         if($('#podkategorie').length>0)
  13.             $('#podkategorie').remove();
  14.  
  15.         //metoda pobierająca dane JSON z podanego adresu w zmiennej url
  16.         $.getJSON(
  17.             url,
  18.             function(data){
  19.  
  20.                 //tworzymy nową, pustą listę select o id: podkategorie i ją dołączamy do formularza
  21.                 select = '<select id="podkategorie"></select>';
  22.                 $('#formularz fieldset').append(select);
  23.                 var lista = $('#podkategorie');
  24.  
  25.                 //ukrywamy listę. Potrzebne to będzie do uzyskania animacji pojawienia się elementu na stronie
  26.                 lista.hide();
  27.  
  28.                 //generowanie kolejnych opcji listy
  29.                 $.each(data, function(key, val){
  30.                     var option = $('<option/>');
  31.                     option.attr('value', key)
  32.                           .html(val)
  33.                           .appendTo(lista);
  34.                 });
  35.  
  36.                 //animacja pojawienia się elementu na stronie
  37.                 lista.show('scale', 500);
  38.             },
  39.             'json'
  40.         );
  41.     })
  42. })
[HTML] pobierz, plaintext


index.php:

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>[jQuery]Animowana zależna lista rozwijana - demo by Piotr Nalepa</title>
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  7. <script src="http://blog.piotrnalepa.pl/demo/jquery-select/jquery-ui-1.8.14.custom.min.js"></script>
  8. <script src="select.js"></script>
  9. </head>
  10. <body id="page">
  11.     <header>
  12.         <hgroup>
  13.             <h1>[jQuery]Animowana zależna lista rozwijana</h1>
  14.             <h2>demo by Piotr Nalepa</h2>
  15.         </hgroup>
  16.     </header>
  17.     <form action="select.php" id="formularz" action="post">
  18.         <fieldset>
  19.             <legend>Kategorie</legend>
  20.             <select id="kategorie">
  21. 			<option value="1411">Kategoria 1</option>
  22. 			<option value="1411">Kategoria 2</option>
  23. 			<option value="1411">Kategoria 3</option>
  24. 			<option value="1411">Kategoria 4</option>
  25.             </select>
  26.         </fieldset>
  27.     </form>
  28. </body>
  29. </html>
  30.  
[PHP] pobierz, plaintext

markonix
9.02.2014, 14:45:53
Podany skrypt moim zdaniem działa tylko na 2 poziomy, nie jest uniwersalny.
miras
9.02.2014, 17:19:16
To ma ktoś jakiś pomysł jak to rozwiązać?
markonix
9.02.2014, 17:45:06
Wszystko zależy jak teraz to wygląda w bazie i jaki ma być efekt (co trzeba wybrać).
Ja bym zmodyfikował ten kod tak, że gdy stworzy nową listę select to niech na niej też będzie nasłuchiwał zmiany i tworzył kolejny select obok tak aż do momentu gdy powstała listą nie będzie miała podkategorii potomnych (np. json zwróci null czy inną umowną wartość).
miras
9.02.2014, 17:51:55
W bazie to wygląda tak:

id name children
1 motoryzacja 0
2 samochody 1

Mógłbyś jakiś prototyp tego pokazac, bo nie poradzę sobie..
_Borys_
9.02.2014, 18:01:59 
[HTML] pobierz, plaintext 
  1. <option value="1411">Kategoria 1</option>
  2. <option value="1411">Kategoria 2</option>
  3. <option value="1411">Kategoria 3</option>
  4. <option value="1411">Kategoria 4</option>
[HTML] pobierz, plaintext

Czemu wszędzie takie samo id
miras
9.02.2014, 18:03:07
to akurat chciałem sprawdzić na przykładzie działu motoryzacja, przypadek po prostu wink.gif
markonix
9.02.2014, 18:14:41
Cytat(miras @ 9.02.2014, 17:51:55 ) *
W bazie to wygląda tak:

id name children
1 motoryzacja 0
2 samochody 1

Mógłbyś jakiś prototyp tego pokazac, bo nie poradzę sobie..

Nigdy nie miałem potrzeby pisania takiego skryptu więc nie mam żadnych prototypów.

Przykład który dałeś rozwiązuje 3/4 problemów, tylko go troszkę ulepszyć, zrobić bardziej elastycznym wg algorytmu, który Ci podałem.
Jak nie masz ochoty próbować to napisz w dziale zleceń.
nospor
10.02.2014, 07:48:55
Cytat
ylko problem taki, że wyświetla mi tylko 1 podkategorię, a poziomu 3 i 4 już nie..

$tab = array($row['id']=>$row['name']);
W petli nadpisujesz ciagle zmienną $Tab, wiec nie ma co sie dziwic ze zawsze masz tylko ostatnią wartosc..... Troche myslec trzeba.

$tab[$row['id']] = $row['name'];
Teraz masz "dopisywanie" a nie jak wczesniej "nadpisywanie"
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.