代码之家 › 专栏 › 技术社区 › MrB

组合框中的Javascript存储对象

drop-down-menu javascript

MrB · 技术社区 · 7 年前

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

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;

然而,当我这样做的时候 console.log 第页,共页 lat 和 lon 它们显示为未定义。

组合框是否将变量存储为其值?如果没有,我如何做,如果是,我如何提取其他信息?

2 回复 | 直到 7 年前

Ele 7 年前

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

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

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>

H77 7 年前

value 是字符串,因此无法容纳对象。为什么不使用 dataset 相反

e、 g。

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;

  Object.keys(opt).forEach(function(k) {
    el.dataset[k] = opt[k];
  });

  document.getElementById("combo").append(el);
}

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

<select id="combo">
</select>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前