Javascript - 如何调用对象？

Question

如您所见，我创建了三个对象，每个对象都有不同的数组。

var redmeat = {options: ["beef", "steak", "kangaroo"]},
    whitemeat = {options: ["chicken", "turkey"]},
    fish = {options: ["salmon", "tuna"]};

然后，在 HTML 中我创建了一个带有三个相应选项的选择字段。

<select name="meat-type">
    <option value="redmeat">Red meat</option>
    <option value="whitemeat">White meat</option>
    <option value="fish">Fish</option>
</select>

现在，每当用户选择该字段时，我都希望能够在我的控制台中显示正确的数组。 (比如选择红肉，控制台会显示“牛肉”、“牛排”、“袋鼠肉”。)

$('select[name=meat-type]').change(function(){
    var e = $("select[name=meat-type] option:selected").val();
    function updatefield (e){
        console.log(e); //this works, easy.
        f = e.options; //but this doesn't work, return as undefined
        console.log(f);
    };          
    updatefield(e);
});

所以问题是；如何调用对象？

Answer 1

首先您需要修改您的对象并将它们放入单个对象中。

之后，您可以轻松调用对象键并获取它的值。

var meatObj = {
  redmeat: ["beef", "steak", "kangaroo"],
  whitemeat: ["chicken", "turkey"],
  fish: ["salmon", "tuna"]
};

$('select[name=meat-type]').change(function(){
  console.log(meatObj[this.value]);
});

这是 fiddle对于上面的代码