Najpierw podam kody, a potem podam moje uwagi, zastrzeżenia, co mi się w działaniu nie podoba i za czym mam dość spore problemy.
test_skrypt.js (tam są funkcje JS):
Kod
function ls_1(nr)
{
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("selector_c").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../dynamic.php?ls="+nr,true);
xmlhttp.send();
}
function ls_2(nr)
{
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("selector_l").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../dynamic.php?ls2="+nr,true);
xmlhttp.send();
}
{
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("selector_c").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../dynamic.php?ls="+nr,true);
xmlhttp.send();
}
function ls_2(nr)
{
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("selector_l").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../dynamic.php?ls2="+nr,true);
xmlhttp.send();
}
dynamic.php (tutaj wykonuję wszelkie polecenia które mają coś zmienić):
<? //Dotyczy pierwszego pola select if($_GET['ls']!=null){ $p=$_GET['ls']; switch($p){ case 's': break; case 'm': break; }} else{ } //Dotyczy drugiego pola select if($_GET['ls2']!=null){ $q=$_GET['ls2']; switch($q){ case 'm1': break; }} else{ } ?>
fragment kodu gdzie mam pola select:
echo'<div class="selector2"> <label for="rozmiar">rozmiar:</label> <select name="rozmiar" id="selector_r" onchange="ls_1(this.value)"> <option value=""></option> <option value="s">S</option> <option value="m">M</option> </select> </div> <div class="selector2"> <label for="kolor">kolor:</label> <select name="color" id="selector_c" onchange="ls_2(this.value)"> <option value=""></option> </select> </div> <div class="selector2"> <label for="ilosc">ilosc:</label> <select name="data[ilosc][name]" id="selector_l"> <option value="1">1</option> <option value="2">2</option> </select> </div>';
A teraz moje spostrzeżenia, uwagi, czy też pytania:
1. Czy da się jakoś te dwie funkcje JS (ls_1 i ls_2) zamknąć w jedną, bo przyznaję, że coś kombinowałem z ifami ale jakoś nie wyszło.
2. Gdy już działa wszystko to w momencie, kiedy wybieram opcję w pierwszym select to wtedy w drugim mam normalnie trzy opcje plus pole t2 (czyli to po else w dynamic.php dot. drugiego selecta) Dlatego właśnie dodałem te t1 i t2, żeby łatwiej było zlokalizować błąd, ale to jakoś nic mi szczególnie nie dało i może wy coś widzicie co pominąłem, bo w gruncie rzeczy nie chciał bym, żeby to tak było (mają być tylko trzy pola i tyle).
3. To już ostatnia rzecz, która przyznaję dosyć mocno mnie zaskoczyła, a mianowicie gdy juz mam wybraną opcję w select 1 i 2 to wtedy w select 3 pojawia mi się t1 (czyli to z pierwszego selecta w dynamic.php) a ten select w ogóle ma nie korespondować z select 3. Co to może być?
Domyślam się, że dużo napisałem i dla wielu z was jest to zapewne bardzo proste, ale jak już mówiłem dopiero zaczynam JS i AJAXA tak więc liczę na wsparcie i zrozumienie.