ugrás a tartalomhoz

Listaelem választáskor új, dinamikus lista adódik az űrlaphoz

Creative · 2011. Május. 2. (H), 20.40
Üdv

Tudom, volt már hasonlóról szó itt a fórumban, de ilyen konkrétan nem. Az alapfelállás tehát a következő:

Adott egy form, mely egy select listet ír ki. Ezt adatbázisból kapva generálom.
$t .= '<div style="height:1px;background-color:#006244;margin-bottom:8px;margin-top:4px;width:710px;">&nbsp;</div>';
$t .= '<label style="float: left; width: 150px;" for="regiocsoport">Válasszon egy megyét</label>';
$t .= '<div id="regiocsoport">';
$sql = "SELECT regiokod,regionev FROM regiok GROUP BY irszam ORDER BY irszam";
$res = mysql_query($sql);
$i=0;
$t .= '<select style="width: 330px;" name="regiolista" class="text" id="regiolista">';
$t .= '<option value="NULL">-- válasszon --</option>';
while ($r=mysql_fetch_assoc($res)) {
$t .= '<option value="' . $r['regiokod'] . '">' . $r['regionev'] . '</option>';
}
$t .= '</select>';
$t .= '</div>';
Ez átadja a sablonomnak egy divbe a listát. Azt szeretném megoldani, hogyha kiválasztok al istából egy megyét, pl Zala, akkor annak az értékével küldök egy kérést lehetőség szerint jqueryvel, hogy a város táblából csak az ebbe a megyébe tartozóakat lekéri s hasonló tömbként egy listát képez belőle, de ez csak azután jelenik meg, hogy én az első listán választottam. Ezután, ha a másodikon választok, akkor behozza tömbként az adott városhoz tartozó látnivalók adatait. Továbbá az addig kiválasztott értékek maradjanak kijelölve, tehát kapják meg a selected="selected" értéket. S ez a része nem akaródzik menni :S Ha ebben tudna valaki jártasabb egy kis helpet adni, nagyon megköszönném ^^

C.
‹ datatables ajax + modal soronként link egy másik oldal aljára ›
 ■
1

AJAX

Poetro · 2011. Május. 2. (H), 21.36

/**
 * Lista létrehozása.
 * 
 * @param {String} name
 *   A list neve / azonosítója
 * @param {Object|Array} data
 *   A listaelemek listája.
 * @returns {jQuery}
 *   jQuery objektum az új <select> listával.
 */
function createList(name, data) {
  var list = $('<select></select>', {
    id: name,
    name: name
  });
  $.forEach(data, function (id, text) {
    $('<option></option>', {value: id, text: text}).appendTo(list);
  });
  return list;
}

// A régiólist változásakor...
$('#regiolista').change(function () {
  // Eltávolítjuk a régi város listát.
  $('#varosok').remove();
  // Letöltjük a városok listáját.
  $.getJSON('varosok.php', {'regiokod' : $(this).val()}, function (data) {
    // Az adatok megérkezésekor létrehozunk egy új város listát.
    // valamint annak változásakor...
    createList('varosok', data).insertAfter('#regiocsoport').change(function (data) {
      var varosok = this;
      // Eltávolítjuk a régi érdekességek listát.
      $('#erdekessegek').remove();
      // Letöltjük az érdekességek listáját.
      $.getJSON('erdekessegek.php', {'varosid' : $(this).val()}, function (data) {
        // Az adatok megérkezésekor létrehozunk egy új érdekességek listát.
        // valamint annak változásakor...
        createList('erdekessegek', data).insertAfter(varosok).change(function () {
          // Feldobjuk az érdekesség nevét
          alert($(this).text());
        });
      });
    });
  });
});
A varosok.php valamint az erdekessegek.php egy asszociatív tömböt kell, hogy visszaadjon JSON formában.