Javascript-форум - Сделать динамический option

Здравствуйте. Вот пытаюсь сделать двойной динамический option.

В общем у меня есть 3 селекта. В первом селекте выбирается жанр музыки, потом по нему подставляется музыканты, потом по музыкантам альбомы выбираются. Так вот проблема моя в том, что когда в самом начале должны загрузится список по умолчанию. У меня альбомы по умолчанию не грузятся. Как будто бы нету ещё тогда dom элемента (option), который создаётся при ajax на musician, а следом за ним идёт на album запрос и вот он не подгружается.

Вот сама функция, которая делая ajax запрос:

function autoOption(id,filename,optionid) {
            $.ajax({
                 type: "POST",
                 url: filename,
                 data: "id=" + id,
                 dataType: 'json',
                 success: function(data) {
                       $("#" + optionid).empty();
                      for (var prop in data) {
                         $("#" + optionid).append("<option value= '" + prop + "'>" + data[prop] + "</option>");
                    }
                 }
            });
   }

Вот, что я написал:

$(document).ready(function() { //читаем дом
                    var id_genre = $('#genre').val();
                    autoOption(id_genre,'getMusician.php','musician');
                        var id_musician = $('#musician').val();
                        autoOption(id_musician, 'getAlbum.php', 'album');

                    $('#genre').change(function() { 
                        id_genre = $('#genre').val();
                        autoOption(id_genre,'getMusician.php','musician');
                        id_musician = $('#musician').val();
                        autoOption(id_musician, 'getAlbum.php', 'album');
                    });
                    
                    $('#musician').change(function() {
                        var id_musician = $('#musician').val();
                        autoOption(id_musician,'getAlbum.php','album');
                    });
                });

Вот, как у меня select идут:

Выберите стиль:
			<select name="genre" id="genre">
                            <?php while($row = $genre_data->getGenre()) { ?>
                                <option value="<?php echo $row['id']; ?>"><?php echo $row['genre']; ?></option>
                            <?php } ?>
                        </select><br>
                Выберите музыканта:
                <select name="musician" id="musician">
                </select><br>
                Выберите альбом:
                <select name="album" id="album">
                </select>

Дело в том, что динамически когда я выбираю меняю элемент из списка #musician
то всё работает. Но когда страница загрузилось только, то в список #album не подсталяется значение. Вот этот момент:

$(document).ready(function() { //читаем дом
                    var id_genre = $('#genre').val();
                    autoOption(id_genre,'getMusician.php','musician');
                        var id_musician = $('#musician').val();
                        autoOption(id_musician, 'getAlbum.php', 'album');

Вот тут 1 значение подставляется в #musician а второе уже по подсталенную значению #musician должно подставить в #album. Но, не подставляет. Сложно обьяснить проблему. Ну в общем, кто сможет, то помогите, пожалуйста.