Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Auto-listy rozwijane
Forum PHP.pl > Forum > PHP
5w155
Witam! Mam następujący problem. Posiadam 2 listy rozwijane. Pierwsza z nich jest tworzona dynamicznie w taki sposób:
  1. $zapytanie = 'SELECT id_kategorii, nazwa_kategorii FROM kategorie';
  2. $wyniki = $baza->select($zapytanie);
  3. echo 'Wybierz kategorię:<span id="kat"><select>';
  4. foreach($wyniki as $wiersz)
  5. {
  6. echo '<option>'.ucfirst($wiersz['nazwa_kategorii']).'</option>';
  7. }
  8. echo '</select></span>';


Chcę, żeby druga lista tworzyła się również dynamicznie na postawie wybranej wcześniej kategorii, tyle że miałaby ona pokazywać listę podległych jej podkategorii.
Ogólnie mówiąc: Wybieram z listy kategorię; pokazuje mi się lista podkategorii.

Dodatkowo dorzucę trochę SQL'a żeby wszystko było jasne:
  1. CREATE TABLE IF NOT EXISTS `kategorie` (
  2. `id_kategorii` int(11) NOT NULL AUTO_INCREMENT,
  3. `nazwa_kategorii` varchar(100) collate utf8_polish_ci NOT NULL,
  4. PRIMARY KEY (`id_kategorii`)
  5. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_polish_ci AUTO_INCREMENT=4 ;

  1. INSERT INTO `kategorie` (`id_kategorii`, `nazwa_kategorii`) VALUES
  2. (1, 'historia'),
  3. (2, 'biologia'),
  4. (3, 'zapowiedzi');

-------------
  1. CREATE TABLE IF NOT EXISTS `podkategorie` (
  2. `id_podkategorii` int(11) NOT NULL AUTO_INCREMENT,
  3. `nazwa_podkategorii` varchar(100) collate utf8_polish_ci NOT NULL,
  4. `id_kategorii` int(11) NOT NULL,
  5. PRIMARY KEY (`id_podkategorii`),
  6. KEY `id_kategorii` (`id_kategorii`),
  7. KEY `id_kategorii_2` (`id_kategorii`)
  8. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_polish_ci AUTO_INCREMENT=6 ;

  1. INSERT INTO `podkategorie` (`id_podkategorii`, `nazwa_podkategorii`, `id_kategorii`) VALUES
  2. (1, 'opowiadanie', 2),
  3. (2, 'powie\u015b\u0107', 1),
  4. (3, 'historyjka', 2),
  5. (4, 'bajeczka', 1),
  6. (5, 'zapowiedzi', 3);

  1. ALTER TABLE `podkategorie`
  2. ADD CONSTRAINT `podkategorie_ibfk_1` FOREIGN KEY (`id_kategorii`) REFERENCES `kategorie` (`id_kategorii`) ON DELETE NO ACTION ON UPDATE NO ACTION;
tiraeth
Użyj AJAX. Po wybraniu opcji z pierwszej listy, JavaScriptem wczytaj nowe opcje (albo załaduj kod html z nowym Selectem, albo wczytaj tablicę elementów).

Osobiście polecam jQuery.

Załóżmy, że pierwszy Select ma id=parentSelect. Element div, do którego wklepiemy nasz select (zwrócony kod html) to #childSelectDiv. Kod JS (z użyciem biblioteki jQuery):
[JAVASCRIPT] pobierz, plaintext
  1. $('#parentSelect').change(function(){
  2. $.get('subselect.php', {parent:$(this).val()}, function(result){
  3. $('#childSelectDiv').html(result);
  4. });
  5. });
[JAVASCRIPT] pobierz, plaintext


To jest takie najprostsze rozwiązanie. Jeśli masz już obiekt typu select, to możesz to rozbudować, zwrócić tablicę (JSON) elementów i je "wstrzyknąć" w już istniejący select.

Info w google pod hasłami javascript two selects ajax
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.