Javascript 如何在下拉列表中列出对象的一个属性，并且在以后仍然访问所有属性？

我是javascript新手，希望你们中一些睿智、经验丰富的Java脚本编写人员能提供一些意见

上下文：我正在用一个包含多个属性的对象数组填充一个下拉选择表单（id:foodList，位于html页面中）。我希望下拉菜单为每个选项显示对象的一个属性（在本例中为foodName），但其余的对象属性保持可访问。此时，下拉列表按foodName列出选项，但出现错误，即“无法读取undefined的属性'foodName'

功能食品（食品名称、份量、配餐、价格）{
this.foodName=foodName；
this.servingSize=servingSize；
this.calsPerServing=calsPerServing；
这个价格=价格；
}
var ramenChicken=新食品（“拉面、鸡肉味”、“1包”，380，0.17）；
var Ramenbef=新食品（“拉面、牛肉味”、“1包”，380，0.17）；
var ramenOriental=新食品（“拉面，东方风味”，“1包”，380，0.17）；
var pantry=popFoodList（ramenChicken、ramenOriental、Ramenbef）；
函数popFoodList（列表）{
var select=document.getElementById（“foodList”）；
var i；
对于（i=0；i

你离得不远。要实现这一点，您需要存储附加到DomeElement的对象，并在以后再次引用该对象时在同一位置对其进行寻址

因此，将代码更改为：

function popFoodList(list) {
    var select = document.getElementById("foodList");
    var i;
    for(i = 0; i < arguments.length; i++) {
        var opt = arguments[i].foodName;
        var optFull = arguments[i];
        var el = document.createElement('option');
        el.textContent = opt;
        el.value = opt;
        el.optFull = optFull; //this assigns the object to the DOMElement
        select.appendChild(el);
    }
};

---

还要确保在引用它时，引用的是domeElement而不是jQuery集合（因为我看到您使用JQ）。一些jQuery回调将其参数作为包含domeElement的jQuery集合接收。

我认为

el.value=opt会将值设置为所需的值。我还将设置
el.optFull=optFull然后，当您稍后引用它时，请确保使用相同的路径，例如el.optFull.servingSize
。还要确保在引用它时，引用的是domeElement而不是jQuery集合（因为我看到您使用JQ）。一些jQuery回调将其参数作为一个jQuery集合接收，其中包含有效的DomeElement！非常感谢。我已经将这一评论转换成了一个答案，以防其他任何人提出这个问题并遇到这个问题。快乐编码！
function popFoodList(list) {
    var select = document.getElementById("foodList");
    var i;
    for(i = 0; i < arguments.length; i++) {
        var opt = arguments[i].foodName;
        var optFull = arguments[i];
        var el = document.createElement('option');
        el.textContent = opt;
        el.value = opt;
        el.optFull = optFull; //this assigns the object to the DOMElement
        select.appendChild(el);
    }
};

el.optFull.servingSize