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

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" }; 

---

这是标识是如何工作的：

<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

你错过关闭} </script>标签

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]; 
}