當選擇下拉菜單選項時，需要填充多個文本字段

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