Javascript 将对象存储在组合框中

Question

我有一堆格式如下的对象:

var Manchester ={ 
     name: "Manchester",
     latitude:53.3,
     longitude:-2.2
};

存储在名为airports的数组中。然后，我有一个 id 为 combo 的组合框，该组合框是从对象数组中填充的，组合框显示对象的名称:

for(var i=0; i<airports.length; i++){
    var opt=airports[i];
    var el=document.createElement("option");
    el.textContent=opt.name;
    el.value=opt;
    document.getElementById("combo").append(el);
}

然后我希望能够读取该对象的其他两个属性:

var e = document.getElementById("combo");
var lat= e.options[e.selectedIndex].value.latitude;
var lon= e.options[e.selectedIndex].value.longitude;

但是，当我执行 lat 和 lon 的 console.log 时，它们显示为未定义。

组合框是否将变量存储为其值？如果不是，我该怎么做，如果是，我该如何提取其他信息？

Answer 1

选项的值用于存储字符串而不是对象。

另一种方法是使用数据属性。

var airports = [{
  name: "Manchester",
  latitude: 53.3,
  longitude: -2.2
}];

for (var i = 0; i < airports.length; i++) {
  var opt = airports[i];
  var el = document.createElement("option");
  el.textContent = opt.name;
  el.value = i;
  el.dataset.lat = opt.latitude;
  el.dataset.lon = opt.longitude;
  document.getElementById("combo").append(el);
}

document.getElementById("combo").addEventListener('change', function() {
  var lat = this.options[this.selectedIndex].dataset.lat;
  var lon = this.options[this.selectedIndex].dataset.lon;
  console.log(lat, lon);
});

<select id='combo'>
<option>-----</option>
</select>