[PHP][AJAX] Ładowanie kategorii do selecta Opcje

[d.stp]

Próbuje zrobić wybór kategorii zależny od wyboru poprzedniego selecta. Mam formularz:

[HTML] pobierz, plaintext 
<select name="cats">
<option value="1">test</option>
<option value="2">test 2</option>
<option value="3">test 3</option>
</select>
[HTML] pobierz, plaintext 

i ajax:

[HTML] pobierz, plaintext 
function showCats(str) {
		if (str == "") {
			document.getElementById("txtHint").innerHTML = "";
			return;
		} else { 
			if (window.XMLHttpRequest) {
				// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new XMLHttpRequest();
			} else {
				// code for IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById("cats_join").innerHTML = xmlhttp.responseText;
				}
			}
			xmlhttp.open("GET","select.php?cat_id="+str,true);
			xmlhttp.send();
		}
 
	}
[HTML] pobierz, plaintext 

takie coś ładuje mi ładnie podkategorie zależne od wyboru kategorii głównej. Problem w tym, że te podkategorie mają jeszcze swoje podkategorie i wtedy jak pojawi mi się drugi select to już nie ładuje dalej po wyborze jakiejś opcji :/ tak samo drugi select (ten który się pojawił) nie reaguje już naawet na:

[HTML] pobierz, plaintext 
//kategorie
		$('.cats').on('change', function(){
			alert(1);
			var cat_id = $(this).val();
			showCats(cat_id);
 
		});
[HTML] pobierz, plaintext 

W select.php tworzę sobie ten select a opcje do niego pobieram z bazy...

[d.stp]

Ogarnąłem już wcześniej, ale i tak dzięki.

Teraz dopiero mam zagadkę...

Zrobiłem tak, że po wybraniu kategorii głównej pokazuje się kolejny select z opcjami gdzie kategoria_glowna == opcja_wybrana, działa. Problem w tym że ten skrypt co mam teraz działa na takiej zasadzie że w miejscu selecta, który pojawił się po wybraniu selecta głównego pokazuje się inny select, a stary znika. Zmieniłem więc kod:

document.getElementById("cats_join").innerHTML = xmlhttp.responseText;

Na:

$('#cats_join').append(xmlhttp.responseText);

i efekt osiągnięty, ale jak wybiorę sobie np. kategorie główną, później jej podkategorie, a następnie jeszcze jedną podkategorie tej wcześniejszej i dalej zmienie np. podkategorie to zamiast chciałbym żeby znikały mi wszystkie selecty które są > kategorii klikniętej, bo teraz za każdym wybraniem kategorii pojawia się kolejny select i tak w kółko..

(IMG:http://s29.postimg.org/eltajclgn/Przechwytywanie.png)

@rad11, wiem o tym, ale to jest tylko żeby działałol później i tak to będę zmieniał

Jakiś pomysł?