我如何从下拉菜单中获取值？

Question

我制作了一个简单的下拉菜单，我可以在其中 select navn 但我不知道如何从数组的后面部分获取 sukker_g 值。我想要的是获得 sukker_g 值，以便稍后在项目中使用这些数字

 var person = [
    {navn:"Imsdal Aktiv", volum:0.5, sukker_g:27.3},
    {navn:"Coca-Cola", volum:0.5, sukker_g:53},
    {navn:"Iste", volum:0.5, sukker_g:44},
    {navn:"Red Bull", volum:0.250, sukker_g:27.5},
    {navn:"Iskaffe", volum:0.330, sukker_g:16.5},
    {navn:"Frappuchino", volum:0.250, sukker_g:25.5},
    {navn:"Solrik", volum:0.250, sukker_g:29.7},
    {navn:"Litago", volum:0.5, sukker_g:20},
    {navn:"Vitamin Boost", volum:0.5, sukker_g:20},
    {navn:"Solbærsirup", volum:0.250, sukker_g:24.5},
    {navn:"Sjokolademelk", volum:0.250, sukker_g:12.5},
]
var select = document.getElementById("selectNumber");

for(var i = 0; i < person.length; i++) {
    var opt = person[i].navn;
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;

    select.appendChild(el);         
}

到目前为止，我的工作正常，但是有人可以帮助我完成将 sukker_g 的值获取到 selected navn

的最后一部分吗

Answer 1

好吧，您现在可以利用 html5 中可用的 data-* 属性：

for (var i = 0; i < person.length; i++) {
  var opt = person[i].navn;
  var skValue = person[i].sukker_g; // get it here
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  el.setAttribute('data-value', skValue); // set it here
  select.appendChild(el);
}

这将导致：

<option value='Imsdal Aktiv' data-value='27.3'>Imsdal Aktiv</option>

稍后您可以使用它来获取数据值：

var getSkkg = document.getElementById("selectNumber").options[this.selectedIndex].dataset.value

document.getElementById("selectNumber").onchange = function(e) {
//window.onload = function() {
  var getvalue = document.getElementById("selectNumber").options[this.selectedIndex].dataset.value;
  alert(getvalue);
};

<select id='selectNumber'>
  <option data-value='chooose'>chooose.....</option>
  <option data-value='custom-dataset'>custom-dataset</option>
  <option>afasfasdfasd</option>
</select>

Answer 2

将 sukkers_g 值保存到数组 sukkers 中以备将来使用。

JS

var person = '[{"navn":"Imsdal Aktiv", "volum":0.5, "sukker_g":27.3},    {"navn":"Coca-Cola", "volum":0.5, "sukker_g":53}, {"navn":"Iste", "volum":0.5, "sukker_g":44}, {"navn":"Red Bull", "volum":0.250, "sukker_g":27.5}, {"navn":"Iskaffe", "volum":0.330, "sukker_g":16.5},    {"navn":"Frappuchino", "volum":0.250, "sukker_g":25.5}, {"navn":"Solrik", "volum":0.250, "sukker_g":29.7}, {"navn":"Litago", "volum":0.5, "sukker_g":20}, {"navn":"Vitamin Boost", "volum":0.5, "sukker_g":20},    {"navn":"Solbærsirup", "volum":0.250, "sukker_g":24.5},    {"navn":"Sjokolademelk", "volum":0.250, "sukker_g":12.5}]';
var select = document.getElementById("selectNumber");
var objects_array = JSON.parse(person); 
var sukkers=[];   
for(var i = 0; i < objects_array.length; i++) {
    var opt = objects_array[i].navn;
    sukkers[i] =objects_array[i].sukker_g;
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);         
 }
alert(sukkers.join("\n"));

HTML

<div id='selectNumber'>selectNumber</div>

FIDDLE

中的工作示例

Answer 3

改变这个：

el.value = opt;

… 对此：

el.value = i;

然后您可以像这样访问所选的 sukker_g：

person[select.value].sukker_g

下面是一种面向对象的方法，其中构造函数被调用People，并且创建了navn()、volum()和sukker_g方法。

它创建一个 person 对象：

var person= new People();

…你可以这样引用它的属性：

person.navn()
person.volum()
person.sukker_g()

片段

function People() {
  var person = [
      {navn:"Imsdal Aktiv", volum:0.5, sukker_g:27.3},
      {navn:"Coca-Cola", volum:0.5, sukker_g:53},
      {navn:"Iste", volum:0.5, sukker_g:44},
      {navn:"Red Bull", volum:0.250, sukker_g:27.5},
      {navn:"Iskaffe", volum:0.330, sukker_g:16.5},
      {navn:"Frappuchino", volum:0.250, sukker_g:25.5},
      {navn:"Solrik", volum:0.250, sukker_g:29.7},
      {navn:"Litago", volum:0.5, sukker_g:20},
      {navn:"Vitamin Boost", volum:0.5, sukker_g:20},
      {navn:"Solbærsirup", volum:0.250, sukker_g:24.5},
      {navn:"Sjokolademelk", volum:0.250, sukker_g:12.5},
  ]
  var select = document.getElementById("selectNumber");

  for(var i = 0; i < person.length; i++) {
    var opt = person[i].navn;
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = i;
    select.appendChild(el);         
  }

  this.navn= function() {return person[select.value].navn};
  this.volum= function() {return person[select.value].volum};
  this.sukker_g= function() {return person[select.value].sukker_g};
} //People

var person= new People();

function showPerson() {
  alert(person.navn()+'\r'+person.volum()+'\r'+person.sukker_g());
}

<select id="selectNumber"></select>
<button onclick="showPerson()">Show person</button>

我如何从下拉菜单中获取值？

How do i get values from the dropdown menu?

arrays

multidimensional-array

drop-down-menu