Question

我有一个我正在处理的登录页面，我希望用户选择一个状态，然后当选择状态时，它下面的选择下拉列表将显示该状态内的位置。位置列表来自一个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();





});

Answer 1

我明白了，

    populateDOMlocations: function() {

        bLs.currState = bLs.stateDropdown.val();
        bLs.locationDropdownArray = [];

        for(var l = 0; l < bLs.directoryListingArray.length; l++) {
            if (bLs.directoryListingArray[l].state == bLs.currState ) {
                bLs.locationDropdownArray.push('<option value=\"' + bLs.directoryListingArray[l].storeid + '\">'+ bLs.directoryListingArray[l].title + '</option>');
            }
        }

        bLs.locationDropdownArray.sort();

        //build locations select dropdown
        bLs.locationDropdown.html(bLs.locationDropdownArray);

    },

从Object构建下拉选项

1 个答案: