Question

我有一个变量列表，如下所示，

var gfList = {};
gfList['1'] = {
    center: new google.maps.LatLng(41.878113, -87.629798),
    radius: 400
};
gfList['2'] = {
    center: new google.maps.LatLng(40.714352, -74.005973),
    radius: 250
};
gfList['3'] = {
    center: new google.maps.LatLng(34.052234, -118.243684),
    radius: 650
};
gfList['4'] = {
    center: new google.maps.LatLng(49.25, -123.1),
    radius: 550
};

我希望根据我选择的选择框值从此列表中选择一个对象。
如果我使用静态值

，以下代码正常工作

$('#geofenceId').on("change", function() {
    var geofenceId = '1';
    var gfence = gfList[geofenceId];
    alert('Values are : ' + geofenceId + ',' + gfence.center + '--' + gfence.radious);
});

但如果我从select Box

中获取值，则此代码无法正常工作

$('#geofenceId').on("change", function() {
    var geofenceId = $('#geofenceId').val();
    var gfence = gfList[geofenceId];
    alert('Values are  : ' + geofenceId + ',' + gfence.center + '--' + gfence.radious);
});

我在浏览器控制台中的上述代码中收到如下错误

TypeError：gfence未定义

Answer 1

我建议您使用数组而不是JSON对象来处理数据。

然后，当触发更改事件时，使用$(this).find(':selected').val()获取您的选项的值，在其上应用parseInt()，最后从您的结构中获取具有新索引的条目。

以下是JS代码示例：

var data = new Array();
data.push({ id : "foo", extra : "extra data"});
// prepare your data here

$('.js-dropdown').on('change', function() {
    var option = $(this).find(':selected');
    var index = parseInt(option.val());

    console.log('outcome: ' + data[index]);
});

当然，使用数组会强制您订购数据。否则，请使用原始JSON对象。但是，我认为您必须解析输入以确保您的代码能够正常工作。

从动态列表对象中获取对象

1 个答案: