所以我的问题如下：很容易获取有关某些记录的数据并以表格形式提供。
问题是：它的一部分是一个位置（大陆、国家、城市），由 3 个相互关联的下拉列表表示。
我得到的是浏览器停止响应，我需要一些想法来提出更好的解决方案。
这是一个代码示例，其中包含关于它停止位置的注释，所以也许有人可以给我一个提示：
// To load the drop-down lists I use similar ajax code as the one shown below in the edit case
function processRow(command, id) {
switch(command){
case 'Delete': {
$("#deleteId").val(id);
$('#deleteEventModal').reveal();
}
break;
case 'Edit': {
/* Fetch Data to Fill up the form */
$.ajax({
type: "GET",
url: "scripts/fetchEventById.php?eventId=" + encodeURIComponent(id),
dataType: "json",
success: function(response){
/* On Successful Posting to server side */
// THIS DROP DOWN LOADS AND SETS DB VAL OK
loadContinents("#editEventContinents");
$("#editEventContinents").val(response.eventData.continentId);
// FROM THIS MOMENT ON IT WILL STALL
// last instruction sets continent drop-down with proper value BUT
// when fetching the countries for that continent (below)
// the continent drop-down value comes empty as if nothing
// was selected
// but it was, I visually confirmed that
// after setting it with val() above
loadCountries("#editEventContinents", "#editEventCountries", "#editEventCities");
$("#editEventCountries").val(response.eventData.countryId);
loadCities("#editEventCountries", "#editEventCities");
$("#editEventCities").val(response.eventData.cityId);
$("#editEventStartDate").val(response.eventData.startDate);
$("#editEventEndDate").val(response.eventData.endDate);
$("#editEventUserName").val(response.eventData.userName);
$("#editEventName").val(response.eventData.eventName);
$("#editEventDetails").val(response.eventData.details);
},
error: function(jqXHR, textStatus, errorThrown){
/* log the error to the console */
console.log(
"The following error occured: " +
textStatus, errorThrown
);
}
});
// Get the overlay with the form for editing to pop up
$('#editEventModal').reveal();
}
break;
default:
// oops, something wrong happened
break;
}
return false;
}
// Here is the load continents function
function loadContinents(continentObj) {
// fetch continent data
$.ajax({
type: "GET",
url: "scripts/fetchContinents.php",
dataType: "json",
success: function(data){
/* On Successful Posting to server side */
// Add fetched options to the select object responsible for holding the continents list
$(continentObj).empty(); //clear current available selections
if( data == "" ){
$(continentObj).append("<option value=\"\">No continents found</option>");
}
else{
for( i = 0; i < data.id.length; i++ ){
$(continentObj).append("<option value=\"" + data.id[i] + "\">" + data.name[i] + "</option>");
}
}
},
error: function(jqXHR, textStatus, errorThrown){
/* log the error to the console */
console.log(
"The following error occured: " +
textStatus, errorThrown
);
$(countryObj).append("<option selected value=\"\">Select Continent</option>");
$("#searchEventError").fadeOut(200);
$("#searchEventError").fadeIn(200).html("<div class=\"alert-box error\">Something went wrong with the server request, please try again later</div>");
}
});
return false;
}
// Load Countries
function loadCountries(continentObj, countryObj, cityObj) {
var continentOption = $(continentObj).val();
// clear/reset countries and cities selections
$(countryObj).empty();
$(cityObj).empty().append("<option selected value=\"-1\">Please Select Country First</option>");
$.ajax({
type: "GET",
url: "scripts/fetchCountries.php?continent=" + encodeURIComponent(continentOption),
dataType: "json",
success: function(data){
/* On Successful Posting to server side */
// Add fetched options to the select object responsible for holding the countries list
if( data == "" ){
$(countryObj).append("<option value=\"0\">No countries found</option>");
}
else{
for( i = 0; i < data.id.length; i++ ){
$(countryObj).append("<option value=\"" + data.id[i] + "\">" + data.name[i] + "</option>");
}
}
},
error: function(jqXHR, textStatus, errorThrown){
/* log the error to the console */
console.log(
"The following error occured: " +
textStatus, errorThrown
);
$(countryObj).append("<option selected value=\"-1\">Please Select Continent First</option>");
$("#searchEventError").fadeOut(200);
$("#searchEventError").fadeIn(200).html("<div class=\"alert-box error\">Something went wrong with the server request, please try again later</div>");
}
});
return false;
}
// Load Cities
function loadCities(countryObj, cityObj) {
var countryOption = $(countryObj).val();
// clear/reset cities selections
$(cityObj).empty();
$.ajax({
type: "GET",
url: "scripts/fetchCities.php?country=" + encodeURIComponent(countryOption),
dataType: "json",
success: function(data){
/* On Successful Posting to server side */
// Add fetched options to the select object responsible for holding the cities list
if( data == "" ){
$(cityObj).append("<option value=\"0\">No cities found</option>");
}
else{
for( i = 0; i < data.id.length; i++ ){
$(cityObj).append("<option value=\"" + data.id[i] + "\">" + data.name[i] + "</option>");
}
}
},
error: function(jqXHR, textStatus, errorThrown){
/* log the error to the console */
console.log(
"The following error occured: " +
textStatus, errorThrown
);
$(cityObj).append("<option selected value=\"-1\">Please Select Country First</option>");
$("#searchEventError").fadeOut(200);
$("#searchEventError").fadeIn(200).html("<div class=\"alert-box error\">Something went wrong with the server request, please try again later</div>");
}
});
return false;
}