选择下拉菜单选项时需要填写多个文本字段

Question

由于某种原因，此代码在 IE9 中不起作用（无法尝试其他版本的 IE）。尝试后，它在 Chrome 和 Firefox 中运行良好。当选择下拉项时，文本框会显示消息“未定义”。

我无法弄清楚出了什么问题，我希望它主要在 IE9 中工作...非常感谢任何帮助..

代码： http://jsfiddle.net/pimvdb/RemPF/1/

Answer 1

1. 您不能使用 } 停止函数 printColorAndGroup。
2. 您应该使用对象作为键/值对，而不是数组。
3. 您可能想对对象使用文字表示法。
4. 在 onchange 函数中，您可以使用 this 传递选择。因此 select.options[...] 将变得可能且更清晰。
5. 除了名称之外，您还可以使用 ID，这样您就不必每次都担心 [0]。

更改版本： http://jsfiddle.net/pimvdb/RemPF/1/

---

这是一个文字对象表示法：

var colors = { apple:   "red",
               grape:   "purple",
               milk:    "white",
               cheese:  "yellow",
               chicken: "white",
               beef:    "red"    };

---

这就是 ID 的工作方式：

<input type="text" id="food_group" ...>

并且您可以使用以下方式获取元素：

document.getElementById('food_group')

---

这就是传递选择的工作方式：

<select name="food" onchange="printColorAndGroup(this)">

使用以下 JavaScript：

function printColorAndGroup(select){
var text = select.options[select.selectedIndex].value;
...

Answer 2

您在 标记之前缺少结束 }

function printColorAndGroup(){
    var text = document.getElementsByName('food')[0].options[document.getElementsByName('food')[0].selectedIndex].value;
    document.getElementsByName('food_group')[0].value = groups[text];
    document.getElementsByName('food_color')[0].value = colors[text]; 
}