 kilka SELECT'ów |
| kilka SELECT'ów |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 5 Pomógł: 0 Dołączył: 7.05.2005 Ostrzeżenie: (0%) 
 |
Wiem, ze podobne tematy juz byly ale przeczytalem co moglem i nic....
 Wszystkie moje próby nie przynosza rezultatu.Problem jest taki: Chce mieć 4 listy (selecty), ktore tworza wyszukiwarke (kazda lista zaweza zakres wg ktorego bedziemy wyszukiwac). Wartosci w listach pochodza z bazy danych - przykladowo moze to byc jedna tabela produkty z polami: id, nazwa, rodzaj, typ, kolory, rozmiary Pierwsza lista: WYBIERZ RODZAJ (ponizej OPTIONy) - damskie - meskie - dzieciece Druga lista: TYP SPODNI (ponizej OPTIONy) - wszystkie typy - wszystkie produkty gdzie w bazie w polu plec jest wybrana wartosc z LISTY PIERWSZEJ Trzecia lista: KOLOR SPODNI (ponizej OPTIONy) - wszystkie kolory - wszystkie produkty gdzie w bazie w polu plec jest wybrana wartosc z LISTY PIERWSZEJ i w polu typ jest wybrana wartosc z LISTY DRUGIEJ Czwarta lista: ROZMIAR SPODNI (ponizej OPTIONy) - wszystkie rozmiary - wszystkie produkty gdzie w bazie w polu plec jest wybrana wartosc z LISTY PIERWSZEJ i w polu typ jest wybrana wartosc z LISTY DRUGIEJ i w polu kolory jest wybrana wartosc z listy TRZECIEJ Chodzi o to, aby listy zmienialy sie bez przeladowywania strony (ONCHANGE). Stale maja byc widoczne wszystkie listy, ale dopoki w pierwszej nie wybierzemy RODZAJU, w pozostalych maja byc tylko jedne optiony o treci: wszystkie typy, wszystkie koory, wszystkie rozmiary. Po wyborze RODZAJU, od razu zmieniaja sie 3 dalsze selecty. Jezeli wybierzemy wartosc w DRUGIM to zmieniaja sie Selecty 3 i 4. Jezeli ustawimy wybrane kryteria we wszystkich selectach, a ponownie w drugim zmienimy nasz wybor, to TRZECI i CZWARTY na nowo dostowuja sie do wyboru w DRUGIM. Generalnie umiem rozwiązać ten problem używając php i MySQL, ale przy 4 listach zbyt dużo jest przeładowywania strony... chciałbym tego uniknąc wiec probuje przerobic te listy na Javascript... prosze o pomoc i wskazowki. Probbowalem listy "wkladac" do DIVow i odpowiednio je ukrywac lub pokazywac, ale nic z tego nie wyszlo... Nie przedstawiam zadnego kodu, bo nie stworzylem jeszcze nic co mialo by wiekszy sens... prosze o pomoc. Z GÓRY DZIEKUJE ! |
 |
 
|
 |
|
Post
#2
|
|
 Grupa: Zarejestrowani Postów: 131 Pomógł: 0 Dołączył: 13.07.2003 Skąd: Torun/Poznan Ostrzeżenie: (0%)
|
Chyba rozumiem, o co chodzi. Da sie to zrobic.
Opisze Ci, jak. 1. Dane z bazy danych trzeba przeksztalcic do tablic JS w postaci: Kod var opt1=new Array(); opt1[0]='damskie'; opt1[1]='meskie'; opt1[3]='dzieciece'; var opt2=new Araray(); opt2['damskie']=new Array(); opt2['damskie'][0]='typ spodni damskich 1'; opt2['damskie'][1]='typ spodni damskich 2'; ... opt2['meskie']=new Array(); opt2['meskie'][0]='typ spodni meskich 1'; ... ... itd. dla kolejnych selectow. 2. Potem to, co sie dzieje na stronie, powiazac zdarzeniami. Czyli przy zmianie selecta pierwszego do selecta drugiego ladujesz odpowiednie wartosci. Do usuniecia starych wartosci z selecta sluzy: Kod while(twojSelect.options.length) twojSelect.remove(0); Do dodania nowych: Kod twojSelect.options[0]=new Option("tekst", "wartosc value", czyDomyslnieZaznaczony (zwykle false), czyZaznaczony (zwykle false)); Pozdrawiam. EDIT Zreszta sprobuje Ci cos napisac, bo pewnie nie wytlumaczylem dobrze.  EDIT#2 Kod <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <link rel="stylesheet" href="" type="text/css" /> <title>Tytu³ Strony</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <meta name="language" content="pl" /> <script type="text/javascript"> /* * Ustawiamy dane. * */ //Ile selectow? var selectCount=3; //String <wybierz> var chooseString="<wybierz>"; //Informacja o niemoznosci wyboru; var emptyString="----------"; //Dane do pierwszego selecta: var opt1=new Array(); opt1[0]={text:'damskie', value:'damskie'}; opt1[1]={text:'meskie', value:'meskie'}; //Dane do drugiego selecta: var opt2=new Array(); opt2['damskie']=new Array(); opt2['damskie'][0]={text:'krotkie jeansy', value:'krotkie_jeansy'}; opt2['damskie'][1]={text:'dlugie jeansy', value:'dlugie_jeansy'}; opt2['damskie'][2]={text:'szerokie', value:'szerokie'}; opt2['meskie']=new Array(); opt2['meskie'][0]={text:'drechy;)', value:'drechy'}; opt2['meskie'][1]={text:'dlugie jeansy', value:'dlugie_jeansy'}; opt2['meskie'][2]={text:'szerokie', value:'szerokie'}; opt2['meskie'][3]={text:'moro', value:'moro'}; //Dane do trzeciego selecta: var opt3=new Array(); opt3['damskie']=new Array(); opt3['damskie']['krotkie_jeansy']=new Array(); opt3['damskie']['krotkie_jeansy'][0]={text:'S', value:'S'}; opt3['damskie']['krotkie_jeansy'][1]={text:'M', value:'M'}; opt3['damskie']['dlugie_jeansy']=new Array(); opt3['damskie']['dlugie_jeansy'][0]={text:'M', value:'M'}; opt3['damskie']['szerokie']=new Array(); opt3['damskie']['szerokie'][0]={text:'L', value:'L'}; opt3['damskie']['szerokie'][1]={text:'XL', value:'XL'}; opt3['meskie']=new Array(); opt3['meskie']['drechy']=new Array(); opt3['meskie']['drechy'][0]={text:'XL', value: 'XL'}; opt3['meskie']['drechy'][1]={text:'XXL', value: 'XXL'}; opt3['meskie']['dlugie_jeansy']=new Array(); opt3['meskie']['dlugie_jeansy'][0]={text:'M', value: 'M'}; opt3['meskie']['szerokie']=new Array(); opt3['meskie']['szerokie'][0]={text:'L', value: 'L'}; opt3['meskie']['szerokie'][1]={text:'XL', value: 'XL'}; opt3['meskie']['szerokie'][2]={text:'XXL', value: 'XXL'}; opt3['meskie']['moro']=new Array(); opt3['meskie']['moro'][0]={text:'M', value: 'M'}; opt3['meskie']['moro'][1]={text:'L', value: 'L'}; opt3['meskie']['moro'][2]={text:'XL', value: 'XL'}; /* * setSelect(select, array) * * @param select id elementu select ze strony * @param array referencja do tablicy, z ktorej beda pobierane wartosci * * @return int -1 w przypadku bledu, 0 jesli wszystko okay * * Ustawia w zadanym select'cie wartosci z podanej tabeli. * */ function setSelect(select, array) { //Czy przegladarka da rade? if(!document.getElementById)return -1; //Czyscimy liste opcji: clearSelect(select, chooseString); select=document.getElementById(select); //Czy wybrany index poprzedniego selecta >0? if(array==undefined)return -1; //Wstawiamy nowe wartosci: for(var i=0;i<array.length;i++){ select.options[i+1]=new Option(array[i].text,array[i].value,false,false); } } /* * clearSelect(select) * * @param select id elementu strony typu select * * Czysci wybrany element select. * */ function clearSelect(select) { //Wyczysc wszystkie pola: while(select.options.length) select.remove(0); //Ustaw string zachecajacy do wyboru opcji: select.options[0]=new Option(empytyString, chooseString,true,false); } /* * disableSelect(select) * * @param select referencja do elementu strony typu select * * Likwiduje opcje z selecta i ustawia w nim informacje. * */ function clearSelect(select, string) { //Czy przegladarka da rade? if(!document.getElementById)return -1; select=document.getElementById(select); //Wyczysc wszystkie pola: while(select.options.length) select.remove(0); //Ustaw string zachecajacy do wyboru opcji: select.options[0]=new Option(string,chooseString,true,false); } </script> </head> <body onload="setSelect('sel1',opt1);clearSelect('sel2',emptyString);clearSelect('sel3',emptyString);"> <select id="sel1" onchange="setSelect('sel2',opt2[(this.options[this.selectedIndex].value)]);clearSelect('sel3',emptyString);"> <option value=""></option> </select> <select id="sel2" onchange="setSelect('sel3',opt3[document.all.sel1.options[document.all.sel1.selectedIndex].value][this.options[this.selectedIndex].value])"> <option value=""></option> </select> <select id="sel3"> <option value=""></option> </select> </body> </html> U mnie dziala. Ten post edytował Draugfor 21.05.2005, 18:26:43 -------------------- On the day I was born, the nurses all gathered 'round
And they gazed in wide wonder, at the joy they had found |
|
|
|
 |
|
Aktualny czas: 22.08.2025 - 01:45 |
