I have a javascript function to append options on a select input field. Below is code snippet:
function loadZoneDropDown(){
var datas = placesZoneData.zones, a = document.getElementById("route_start_point");
for(let t in datas){
var value_data = datas[t];
$('#route_start_point').append('<option value="'+t+'">'+value_data.data["name"]+'</option>');
}
sortSelectList(a);
}
This function is called inside a load() function on the <body> tag as below:
function load(){
//otherFunctions();
loadZoneDropDown();
}
HTML code:
<html>
<head></head>
<body onload="load()">
</body>
</html>
The page loads and No new option is appended to the #route_start_point select field. When I run the same function directly on console, the script executes and the options are populated.
Can you help me figure the problem out.
Note that otherFunctions() are running very OK and fine on the webpage.

Screenshot after console execution of loadZoneDropDown() below:
