javascript - innerHTML 和访问对象属性

Question

我想获取列表id的值。然后访问对象属性。例如，如果选择鸡蛋:我想要得到 Egg.cost(是 9)

但是，它显示为未定义。

HTML 部分:

<select id = "list">
<option value = "egg">Eggs</option>
<option value ="banana">Banana</option>
</select>

</select>
<button onclick ="getSelectValue()"></button>
<div id ="example">testing</div>

JavaScript:

function getSelectValue(){
    var selectedValue = document.getElementById("list").value;
    document.getElementById("example").innerHTML=selectedValue["cost"];
}

var banana = {
              cost:1.39,
              servings:6,
              servingSize:1,
              costPerServing:.23
              };

var egg = {
            cost:9,
            servings:24,
            servingSize:1,
            costPerServing:.38

          };

Answer 1

创建对象字典( items )，并使用 <select> 的值获取相关对象:

var list = document.getElementById("list");
var example = document.getElementById("example");
var items = {
  banana: {
    cost: 1.39,
    servings: 6,
    servingSize: 1,
    costPerServing: .23
  },

  egg: {
    cost: 9,
    servings: 24,
    servingSize: 1,
    costPerServing: .38

  }
};

function getSelectValue() {
  var selectedValue = list.value;
  example.innerHTML = items[selectedValue].cost;
}

<select id="list">
<option value = "egg">Eggs</option>
<option value ="banana">Banana</option>
</select>

<button onclick="getSelectValue()">Get cost</button>
<div id="example">testing</div>