Kategorie – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Aj ja by som chcel taku funkciu ;)

Musis si to rozdelit na niekolko krokov. Idealne je mat sadu web servisov, ktore ti budu poskytovat data do dropdown zoznamov (select/option). Ak nemas vlastnu databazu, da sa vyuzit aj niektora z dostupnych sluzieb, napr. http://www.geonames.org/.

Vacsina funguje tak, ze data vypytas nejakym query a dostanes odpoved v xml, alebo json.
Mozes si samozrejme naplnit vlastnu databazu a urobit si vlastne web servisy. V podstate je to nejaky server side script (napr. php), ktoremu submitnes query cez ajax a dostanes odpoved, ktoru javascriptom spracujes a zobrazis v html.

Podla tvojej poziadavky teda potrebujes 3 webservisy:

• kraje
• okresy
• mesta

Pre kraje si musis pripravit server side script, ktory zavolas napr.:
http://server/ws/kraje
a ako odpoved dostanes:

{
"1":"Bratislavsky",
"2":"Trnavsky",
"3":"Nitriansky"
... atd
}

Pre okresy potom budes mat script, ktory zavolas ako:
http://server/ws/okresy?… (kde n bude cislo kraja pochopitelne), odpoved bude podobna:

{
"1":"Trnava",
"2":"Piešťany",
"3":"Hlohovec",
... atd
}

No a pre mesta podobne:
http://server/ws/mesta?…;

{
"1":"Hlohovec",
"2":"Leopoldov",
"3":"Červeník",
... atd
}

Tolko server side.

Teraz sa pozrieme na klient side javascript:

V html zobrazime 3 prazdne dropdowny, ktorym budeme ajaxom plnit obsah:

Kraj:
<select name="kraj" id="kraj">
  <option>---</option>
</select>
Okres:
<select name="okres" id="okres">
  <option>---</option>
</select>
Mesto:
<select name="mesto" id="mesto">
  <option>---</option>
</select>

Teraz pride javascript magic - naplnime prvy dropdown: (preferujem pouzitie jquery pre zjednodusenie)

$.getJSON("http://server/ws/kraje", function(data) {
  var items = [];
  $.each(data, function(key, val) {
    items.push( "<option name='" + key + "'>" + val + "</option>" );
  });
  $("#kraj").append(items.join("")); 
});

Co teraz? Potrebujeme nejaky listener, ktory bude cakat na vyber kraja. Cize ak uzivatel vyberie nejaky kraj, naplni sa druhy dropdown okresmi:

$("#kraj").on("change", function() {
  var id = $(this).val();
  $.getJSON("http://server/ws/okresy?kraj="+id, function(data) {
    var items = [];
    $.each(data, function(key, val) {
      items.push( "<option name='" + key + "'>" + val + "</option>" );
    });
    $("#okres").append(items.join("")); 
  });
});

Super. Ostava uz iba rovnaky listener pre vyber okresu:

$("#okres").on("change", function() {
  var id = $(this).val();
  $.getJSON("http://server/ws/mesta?okres="+id, function(data) {
    var items = [];
    $.each(data, function(key, val) {
      items.push( "<option name='" + key + "'>" + val + "</option>" );
    });
    $("#mesto").append(items.join("")); 
  });
});

Ostava ti uz iba dorobit finalny submit vybrateho mesta, ale to uz je ina story.

Snad som ti nejak pomohol.