Kategoria - AJAX – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Dobrý deň,
chcel by som Vás poprosiť 
o radu alebo nejakú jednoduchú ukážku na 
funkciu že najskor vyberem kraj potom okres a nakoniec mesto alebo dedinu....
Ďakujem za odpovede.

google = ajax triple select example
google = ajax multiple select example
http://coursesweb.net/…-list-ajax_t
- ctrl + f = Here's the result (v podstate na konci clanku)
- na zacatku pak mas stahnuti celeho scriptu "download the files from: Script Multiple Select Dropdown List"
Mozna by bylo nejjednodussi si to pri nacteni stranky ulozit jako tabulku do js a pak to z ni vytahnes. Pripadne si to uloz jako tabulku s id, s odkazem na seznam. Tahat to ajaxem mi prijde dost krkolomne. Stranka ma treba 20k, ta tabulka bude mit dalsich 5-10k. To zas neni takova hruza.

http://www.statnisprava.cz/rstsp/ciselniky.nsf/i/CZ0805

Tohle reseni neobsahuje cisla id danych polozek. Kdyz treba neco pridas mezi nektere mesta, tak to musis cele precislovat. Coz se samozrejme muze kesovat a tahat z db a pak to bude ok. Ale nebudou platne stare formulare, kde budou stare id. Proto je lepsi tam od zacatku davat id z databaze. Ale zase tohle muze byt usporne reseni. Navic to muzes rozsekat do pole cyklem z jednoho velkeho rezezce.
Opava ma 800b. + 200b kraje a okresy. Obrazky s reklamou, co mas na strance maji kolem 10-20k kazdy. Navic se to da naincludovat, kesovat, script zvlast, data zvlast. Coz s generovanim primo s db je trosku slozitejsi.

<div id="xxx0"></div>
<div id="xxx1"></div>
<div id="xxx2"></div>

<script>
var data;
data = {
0: "Hlavní město Praha;Jihočeský kraj;Jihomoravský kraj;Karlovarský kraj;Kraj Vysočina;Královéhradecký kraj;Liberecký kraj;***Moravskoslezský kraj;***Olomoucký kraj;Pardubický kraj;Plzeňský kraj;Středočeský kraj;Ústecký kraj;Zlínský kraj",
1: {7: "Bruntál;Frýdek-Místek;Karviná;Nový Jičín;***Opava;***Ostrava-město",
    8: "***Jeseník;Olomouc;Prostějov..."
   },
2: {7: {4: "Hlučín;Kravaře;Opava;Vítkov;Bělá;Bohuslavice;Bolatice;Branka u Opavy;Bratříkovice;Brumovice;Březová;Budišov nad Budišovkou;Budišovice;Čermná ve Slezsku;Darkovice;Děhylov;Dobroslavice;Dolní Benešov;Dolní Životice;Hať;Háj ve Slezsku;Hlavnice;Hlubočec;Hněvošice;Holasovice;Hrabyně;Hradec nad Moravicí;Chlebičov;Chuchelná;Chvalíkovice;Jakartovice;Jezdkovice;Kobeřice;Kozmice;Kružberk;Kyjovice;Lhotka u Litultovic;Litultovice;Ludgeřovice;Markvartovice;Melč;Mikolajice;Mladecko;Mokré Lazce;Moravice;Neplachovice;Nové Lublice;Nové Sedlice;Oldřišov;Otice;Píšť;Pustá Polom;Radkov;Raduň;Rohov;Skřipov;Slavkov;Služovice;Sosnová;Staré Těchanovice;Stěbořice;Strahovice;Sudice;Svatoňovice;Šilheřovice;Štáblovice;Štěpánkovice;Štítina;Těškovice;Třebom;Uhlířov;Velké Heraltice;Velké Hoštice;Větřkovice;Vršovice;Vřesina;Závada",
        5: "ostrava1,os2,os3"
       },
    8: {0: "Jeseník;Javorník;Zlaté Hory..."
       }
   }
};

function multiselWrite(name,cat)	//,data
{
var i, j, arr, el, cat2, str, del,divname;
del  = ';';
cat2 = ((''+cat).indexOf(del)>0) ? cat.split(del) : [cat];
j    = cat2.length;
divname = name + (j - 1);
el   = document.getElementById(divname);
arr = data;
if (arr[j-1])
  arr = arr[j-1];
else return;
if (j>1)
{
for (i=1;i<j;i++)
	{
	if (arr[cat2[i]])
		{
		arr = arr[cat2[i]];
		}
	else	{
		return;
		}
	}
}
if (el)
  {
  str = '';
  arr = arr.split(";");
    str += "\n"+'<option value="'+(cat2.join(del))+'"> --- <\/option>';
  for(i=0;i<arr.length;i++)
    {
    cat2[j] = i;
    str += "\n"+'<option value="'+(cat2.join(del))+'">'+arr[i]+'<\/option>';
    }
  el.innerHTML = "\n"+'<select onchange="multiselRoll(this);" name="sel_' + divname + '">' + str + '<\/select>';
  }
}

function multiselRoll(el)
{
var m,n;
m = el.parentNode.id;
m = m.replace(/[^a-zA-Z]+/g,'');
n = el.options[el.selectedIndex].value;
multiselWrite(m,n);
}

function init()
{
multiselWrite('xxx','0');
multiselWrite('xxx','0;7');
multiselWrite('xxx','0;7;4');
}

init();
</script>

Nebo jsem v nejakem jinem foru pouzil fohle reseni, ktere vyzaduje vetsi zasahy.

<div id="sel0"></div>
<div id="sel1"></div>

<script>
var data, i;
data = "a,b,c;\
A,B,C;\
D,E,F;\
G,H,I".split(';');

function writeSel(m,n)
{
var i, str, el2;
el2 = document.getElementById('sel'+m);
if (el2 && data[n])
  {
  str = '';
  for(i=0;i<data[n].length;i++)
    {str += "\n"+'<option value="'+i+'">'+data[n][i]+'<\/option>';}
  el2.innerHTML = "\n"+'<select onchange="roll(this);">' + str + '<\/select>';
  }
}

function roll(el1)
{
var m,n;
m = el1.parentNode.id;
m = m.replace(/\D+/,'') * 1 + 1;
n = el1.options[el1.selectedIndex].value * 1 + 1;
writeSel(m,n);
}

function init()
{
for(i=0;i<data.length;i++)
  {data[i] = data[i].split(',');}
writeSel(0,0);
writeSel(1,1);
}

init();
</script>

"nejakú jednoduchú ukážku na funkciu"
Taky by to mohl nekdo pochopit, ze misto rady chces hotove reseni. Zadarmo. Bez premysleni a snahy. :)

Jeste je tu moznost to komprimovat. Odhadem jsem si ted pronasobil 800 x 5 mest x 10 kraju, coz je kolem 50k.
Gzip algoritmus text umi pekne komprimovat, zhruba 10-20%. Nicmene, moderni prohlizece pouzivaji gzip automaticky a komprimuje si to uz server. Takze by dalsi kod mozna nebyl nutny.
http://stackoverflow.com/…tion-of-gzip