Question

我已经创建了一个简单的下拉菜单，我可以选择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的值设置为选定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()

<强>段

＆＃13;

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());
}

＆＃13;

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

＆＃13;

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

3 个答案: