我有一个正在处理的着陆页，希望用户在其中选择一个状态，然后在选择状态时，在下面的选择下拉列表将显示该状态内的位置。位置列表来自一个 json 文件，其中有一个商店位置列表，以及它们的属性，例如商店名称、状态等。我创建了一个对象，但我不确定如何填充基于的选择国家。此外，我构建状态列表的方式也可能不是最好的方式，所以那里的任何帮助也会很棒。谢谢！
$(document).ready(function(){
var buildLocations = {
'settings': {
directoryListingItems : {},
directoryListingArray : [],
globalLatLong : null,
globalLatitude : geoip_latitude(),
globalLongitude : geoip_longitude(),
globalCity : geoip_city(),
globalState : geoip_region_name(),
locationRadius : 30,
NearbyLocationsCount : 0,
locationTotalPlaceholder: $('#location-number'),
locationNamePlaceholder : $('#location-name'),
stateDropdownArray : [],
stateDropdown : $('#state'),
locationDropdownArray : [],
locationDropdown : $('#location'),
},
init: function() {
bLs = this.settings;
buildLocations.getJSONLocations();
},
getJSONLocations: function() {
$.ajax({
url: "data/data.json",
dataType: "JSON",
success: buildLocations.getLocations
});
},
getLocations: function(results) {
// creating objects
for(var i = 0; i < results.locations.length; i++) {
bLs.directoryListingItems = {
store_id: results.locations[i].storeid,
title: results.locations[i].title,
latitude: results.locations[i].latitude,
longitude: results.locations[i].longitude,
state: results.locations[i].state,
distance: buildLocations.getLocationDistance(bLs.globalLatitude, bLs.globalLongitude, results.locations[i].latitude, results.locations[i].longitude)
};
bLs.directoryListingArray.push(bLs.directoryListingItems);
//Check if a state is already in the states array, if not, add it
if ($.inArray('<option value=\"' + bLs.directoryListingArray[i].state + '\">'+ bLs.directoryListingArray[i].state + '</option>', bLs.stateDropdownArray)==-1) {
bLs.stateDropdownArray.push('<option value=\"' + bLs.directoryListingArray[i].state + '\">'+ bLs.directoryListingArray[i].state + '</option>');
//alert("added"+ value.state);
}
//get selected state value
//if in state in bLs.directoryListingItems array matches this value, add item to array
//Add Each location to the locations dropdown
bLs.locationDropdownArray.push('<option value=\"' + bLs.directoryListingArray[i].storeid + '\">'+ bLs.directoryListingArray[i].title + '</option>');
//Count the number of locations that are within the set location radius of the users detected location
if (bLs.directoryListingArray[i].distance < bLs.locationRadius) {
bLs.NearbyLocationsCount++;
}
}
//Sort the states array in alphabetical order
bLs.stateDropdownArray.sort();
//run function to populate dropdowns
buildLocations.populateDOM();
},
compareDistances: function(a,b) {
if (a.distance < b.distance)
return -1;
if (a.distance > b.distance)
return 1;
return 0;
},
populateDOM: function() {
//populate the number inside the map marker
bLs.locationTotalPlaceholder.text(bLs.NearbyLocationsCount);
//populate the area next to the map marker with the users location and state
bLs.locationNamePlaceholder.text(bLs.globalCity + ", " + bLs.globalState);
//build state select dropdown
bLs.stateDropdown.html(bLs.stateDropdownArray);
buildLocations.populateDOMlocations();
},
populateDOMlocations: function() {
//$.each(bLs.directoryListingItems, function(index, value) {
//if (value.state="Florida") {
//alert(index)
///}
//});
//$.each(bLs.directoryListingItems, function(index, obj) {
//$.each(obj, function(attr, value) {
// console.log( attr + ' == ' + value );
//});
//});
//build locations select dropdown
bLs.locationDropdown.html(bLs.locationDropdownArray);
},
getLocationDistance : function(lat1,lon1,lat2,lon2) {
function deg2rad(deg) {
return deg * (Math.PI/180)
};
var R = 6371; // Radius of the earth in km
var dLat = deg2rad(lat2-lat1); // deg2rad below
var dLon = deg2rad(lon2-lon1);
var a =
Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon/2) * Math.sin(dLon/2)
;
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = (R * c) * 0.6214; // Distance in miles
return Math.round( d * 10 ) / 10
},
};
// ====================================================== //
// Populate Locations
buildLocations.init();
});