[JQuery] formularz, obsuga wielu selektów, [Rozwiązany] Problem z obsługą połączonych ze sobą pól typu select Opcje

[Sokon]

Witam,

Mamy sobie formularz a w nim miedzy innymi 3 pola typu select
1. Województwa
2. Miasta (pobierane ajaxem)
3. Dzielnice (pobierane ajaxem)

Przy dodawaniu nowej kliniki lista województw generuje się od razu (jest pobierana z bazy), po wybraniu województwa generuje się lista miast które należą do wybranego województwa (również z bazy), następnie po wybraniu miasta generuje się lista dzielnic (również z bazy). Wszystko działa dobrze w momencie gdy wybieram wartości ręcznie (klikam myszą).

Problem zaczyna się w momencie gdy chce edytować dane kliniki, wybieram ją z listy klinik, otwiera się formularz który jest wypełniony informacjami o wybranej klinice i ....
1. Województwa ładują się dobrze i pole option za pomocą opcji selected również ustawia odpowiednie województwo w którym jest klinika
2. Miasta ładują się dobrze i pole option za pomocą opcji selected również ustawia odpowiednie miasto w którym jest klinika
3. Dzielnice się nie ładują, jak zmienną y zamknąłem w alert(y) to wywalił mi undefined, ale jak dodatkowo zmienną x zamknąłem w alert(x) to pokazała mi się prawidłowa wartość zmiennej y :-)

Jak bez poprawić skrypt? Proszę o jakieś wskazówki bo trochę mnie to przerasta.

Mam sobie taki kod JavaScript (JQuery):

[HTML] pobierz, plaintext 
$(document).ready( function() {
   $(".clinic-row:odd").addClass("bgcolor1");
   $(".clinic-row:even").addClass("bgcolor2");
 
	$("tr.clinic-row").hover( function() {
   	$(this).addClass("hightlight"); }, function() { $(this).removeClass("hightlight");
	});
 
   $.extend({
     getUrlVars: function(){
       var vars = [], hash;
       var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
       for(var i = 0; i < hashes.length; i++)
       {
         hash = hashes[i].split('=');
         vars.push(hash[0]);
         vars[hash[0]] = hash[1];
       }
       return vars;
     },
     getUrlVar: function(name) {
       return $.getUrlVars()[name];
     }
   });
   //var allVars = $.getUrlVars();
   var cid = $.getUrlVar('cid');
 
   $("#province").change(function () {
      var x = $("#province option:selected").val();
      $("#city").load("./cities.php?province="+x+"&cid="+cid);
   }).trigger("change");
 
   $("#city").change(function () {
      var y = $("#city option:selected").val();
      $("#district").load("./districts.php?city="+y+"&cid="+cid);
   }).trigger("change");
});
[HTML] pobierz, plaintext 

----------
Edited

Problem rozwiązany dzięki dokumentacji do JQuery (http://docs.jquery.com/Frequently_Asked_Questions).
Generalnie chodziło o zbindowanie nowych elementów. Ja to zrobiłem tak:

[HTML] pobierz, plaintext 
   $("#province").change(function () {
      var x = $("#province option:selected").val();
      $("#city").load("./cities.php?province="+x+"&cid="+cid, function() {
         $("#city").change(function () {
            var y = $("#city option:selected").val();
            $("#district").load("./districts.php?city="+y+"&cid="+cid);
         }).trigger("change");
      });
   }).trigger("change");
[HTML] pobierz, plaintext 

Ten post edytował Sokon 8.10.2011, 02:19:27