Auto-listy rozwijane, Jedna lista generuje drugą Opcje

[5w155]

Witam! Mam następujący problem. Posiadam 2 listy rozwijane. Pierwsza z nich jest tworzona dynamicznie w taki sposób:

[PHP] pobierz, plaintext 
$zapytanie = 'SELECT id_kategorii, nazwa_kategorii FROM kategorie';
$wyniki = $baza->select($zapytanie);
echo 'Wybierz kategorię:<span id="kat"><select>';
foreach($wyniki as $wiersz)
{
 echo '<option>'.ucfirst($wiersz['nazwa_kategorii']).'</option>';
}
echo '</select></span>';
[PHP] pobierz, plaintext 

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:

[SQL] pobierz, plaintext 
CREATE TABLE IF NOT EXISTS `kategorie` (
  `id_kategorii` int(11) NOT NULL AUTO_INCREMENT,
  `nazwa_kategorii` varchar(100) collate utf8_polish_ci NOT NULL,
  PRIMARY KEY  (`id_kategorii`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_polish_ci AUTO_INCREMENT=4 ;
[SQL] pobierz, plaintext 

[SQL] pobierz, plaintext 
INSERT INTO `kategorie` (`id_kategorii`, `nazwa_kategorii`) VALUES
(1, 'historia'),
(2, 'biologia'),
(3, 'zapowiedzi');
[SQL] pobierz, plaintext 

-------------

[SQL] pobierz, plaintext 
CREATE TABLE IF NOT EXISTS `podkategorie` (
  `id_podkategorii` int(11) NOT NULL AUTO_INCREMENT,
  `nazwa_podkategorii` varchar(100) collate utf8_polish_ci NOT NULL,
  `id_kategorii` int(11) NOT NULL,
  PRIMARY KEY  (`id_podkategorii`),
  KEY `id_kategorii` (`id_kategorii`),
  KEY `id_kategorii_2` (`id_kategorii`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_polish_ci AUTO_INCREMENT=6 ;
[SQL] pobierz, plaintext 

[SQL] pobierz, plaintext 
INSERT INTO `podkategorie` (`id_podkategorii`, `nazwa_podkategorii`, `id_kategorii`) VALUES
(1, 'opowiadanie', 2),
(2, 'powie\u015b\u0107', 1),
(3, 'historyjka', 2),
(4, 'bajeczka', 1),
(5, 'zapowiedzi', 3);
[SQL] pobierz, plaintext 

[SQL] pobierz, plaintext 
ALTER TABLE `podkategorie`
  ADD CONSTRAINT `podkategorie_ibfk_1` FOREIGN KEY (`id_kategorii`) REFERENCES `kategorie` (`id_kategorii`) ON DELETE NO ACTION ON UPDATE NO ACTION;
[SQL] pobierz, plaintext 

[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 
$('#parentSelect').change(function(){
  $.get('subselect.php', {parent:$(this).val()}, function(result){
    $('#childSelectDiv').html(result);
  });
});
[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