Select'ы + AJAX

[Werewolf]

Я хочу сделать три селекта, зависимые друг от друга, то есть выбрал что-то в первом, поменялись два других.

<script type="text/javascript">
selectors = new Array('ctlArtist','ctlAlbum','ctlSong');
var generateList = function(j) {
	var options = '';
	for (var i = 0; i < j.options.length; i++) {
		options += '<option value="' + j.options[i].optionValue + '">' + j.options[i].optionDisplay + '</option>';
	}
	$("select#"+selectors[j.level]).html(options);
}
$(document).ready(function(){
  $("select#ctlArtist").change(function(){
    $.getJSON("select.php",{id: $(this).val(), level: 1}, generateList);
    $("select#ctlAlbum").trigger("change");
  });
  $("select#ctlAlbum").change(function(){
    $.getJSON("select.php",{id: $(this).val(), level: 2}, generateList);
  });
});
</script>

Три селекта ctlArtist,ctlAlbum,ctlSong. Значения подгружаются из select.php. Когда выбираю что-нибудь в первом, во втором селекте должно произойти заполнение опциями второго селекта, а затем вызывается событие change для него, но он(второй селект) считает, что значения у него не поменялись! Меняются они судя по всему после функции-колбека, а нужно в самой функции.

Как это можно исправить?

[Kolyaj]

Это настолько стандартная задача, что даже на этом форуме несколько раз обсуждалась.

[Werewolf]

Сразу говорю, у меня select'ы уже присутствуют на странице.

selectors = new Array('ctlArtist','ctlAlbum','ctlSong');
var generateList = function(j) {
	var options = '';
	for (var i = 0; i < j.options.length; i++) {
		options += '<option value="' + j.options[i].optionValue + '">' + j.options[i].optionDisplay + '</option>';
	}
	$("select#"+selectors[j.level]).html(options);
	console.log(1+"\n"+$("select#"+selectors[j.level]).html());
}
$(document).ready(function(){
	$("select#ctlArtist").change(function(){
		$.getJSON("select.php",{id: $(this).val(), level: 1}, generateList);
		console.log(2+"\n"+$("select#ctlAlbum").html());
	});
});

В консоли Firebug'а показывает вначале данные вторым console.log и только затем из первого. Получается функция-обработчик выполняется асинхронно и запаздывает.

Я нашел решение с использованием setTimeout:

setTimeout('$("select#ctlAlbum").trigger("change")', 1);

В этом случае вначале выполнится обработчик, и только затем сработает триггер.

[x-yuri]

а что тебе мешает генерировать change для 2-го списка в обработчике $.getJSON 1-го?