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

Question

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

我无法弄清楚什么是错的，我希望这主要在IE9中工作......非常感谢任何帮助..

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

谢谢.. RAAM

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

您在</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]; 
}