Zavisne SELECT liste

Pošto u zadnje vrijeme samo Dragan piše na blogu, odlučio sam da se i ja malo umiješam sa pričama iz web segmenta firme. Danas sam radeći na jednom od tekućih projekata prošao jednu čitavu malu agoniju preskakanja web browsera i svih nedosljednosti koje samo oni mogu da imaju.

Naime, ovaj blog je zamišljen samo kao mala pomoć za one koji nalete na sličan problem u budućnosti, a rješenje budu tražili preko Google-a.

Nakon dugo, dugo vremena ukazala se potreba da se kreira nekoliko međusobno zavisnih select (dropdown) lista.

Zadatak je bio da se korisniku omogući da na osnovu izbora grada iz liste gradova, dobije listu naselja unutar odabranog grada, te da se nakon izabranog naselja, dobije lista ulica s čijim konačnim izborom bi se pojavila informacija koje su usluge dostupne za odabranu ulicu.

grad → naselje → ulica → dostupne usluge

S obzirom da sam imao želju da se cjelokupan proces odvija na strani korisnika, bez AJAX-a, već samo da se te tri liste prilagođavaju trenutnoj postavci (izmjena grada bi povlačila gašenja polja ulica i repopulaciju liste naselja). Na samom početku imao sam nekoliko ideja kako riješiti problem od kojih je jedan od prvih bio izvršiti display: none kroz CSS za <option> elemente za šta se ispostavilo da to ne dozvoljava niti jedan browser iz njima znanih razloga; uklanjati <option> elemente te ih kreirati na istim pozicijama što se pokazalo kao Sizifov posao…

Jedna od glavnih divota web developer zanimanja jeste famozni Internet Explorer koji bez obzira šta drugi browseri radili i šta W3C kaže – uporno radi nešto treće.

I na samom kraju savjet: ukoliko imate potrebu da kreirate međusobno zavisne liste na strani klijenta – orginalne liste sakrijte, za rad koristite objekte koje klonirate kroz JavaScript i na njima vršite uklanjanje onih elemenata koje ne želite, a vraćanje na prijašnje stanje vršite uklanjanjem novog objekta iz DOM-a i stvaranjem novog.

U suštini, puno buke niokočega!