1) Первое действие - после загрузки страницы загружаем в первый список страны. Остальные списки должны быть неактивны.
<script type="text/javascript">
// когда подгрузился HTML и построено DOM-дерево
document.addEventListener('DOMContentLoaded', function(){
loadCountries(); // вызовем загрузку первого списка (страны)
});
</script>
Можно вынести весь функционал в отдельный js-файл. Рассмотрим формальное описание функции загрузки стран в селект.
function loadCountries(){
// countryId - идентификатор выбранной страны из списка стран
$.get("GetCountries", { countriId: countryId }) // ajax get
.success(function (x) {
if (!(x === undefined || x.length === 0)) {
// заполним список стран и сделаем активным список городов
loadCities(); // вызываем следующую загрузку
} else {
// очищаем все списки идущие после загрузки стран и дизэйблим их
// можем вывести сообщение, что во время загрузки что-то пошло не так
}
});
}
2) Второе и последующие действия будут похожи друг на друга, приведу как пример:
function loadCities() {
// cityId - идентификатор выбранного города из списка городов
// если он не пустой (то есть выбран город) вызываем следующий код
$.get("GetCities", { cityId: cityId })
.success(function (x) {
if (!(x === undefined || x.length === 0)) {
// заполним список городов
loadRegions(); // вызываем следующую загрузку
} else {
// очищаем все списки идущие после загрузки городов
// можем вывести сообщение, что во время загрузки что-то пошло не так
}
});
// если cityId пустой (не выбран город) очистим все следующие списки
}
Ну и далее, до крайнего списка. Затем, после выбора последнего значения делайте кнопку активной и никакой ajax уже не будет нужен, так как уже все загружено на страницу и просто сформированный список выбранных значений выводите, к примеру, в модальное окно. Так как кода в Вашем вопросе я не увидел, поэтому прикрепил минимум кода в ответе.
Также, на каждый список нужно навесить на событие возникающее при изменении значения элемента списка (onchange), которое будет вызывать соответствующую функцию для перестройки списков, идущих ниже (после) изменяемого селекта.
Как дизэйблить кнопку и сделать ее снова активной, вот пример с помощью JS:
document.getElementById('button-id').disabled = true; // неактивная
document.getElementById('button-id').disabled = false; // активная
Получение выбранных идентификаторов можно делать по разному, к примеру, если у Вас есть jQuery то можно сделать так:
// countries - идентификатор селекта стран
$("#countries").children("option:selected").attr("value");
Ну, или с помощью JS получить выбранный идентификатор:
var elem = document.getElementById("countries");
var countryValue = elem.options[elem.selectedIndex].value;
Я бы рекомендовал выбрать такой подход, когда после загрузки страницы загружается только один список стран, а остальные списки будут загружены после выбора соответствующего значения из списка. Такую функциональность можно реализовать на чистом JS, но с применением jQuery будет конечно попроще.