Необходимо заполнить несколько текстовых полей при выборе опции выпадающего меню

Question

По какой-то причине этот код не работает в IE9 (не может попробовать другие версии IE). При попытке это работало нормально в Chrome и Firefox. При выборе выпадающего элемента в текстовых полях появляется сообщение «undefined».

Я не могу понять, что не так, я хотел, чтобы это работало в основном в IE9 ... Любая помощь очень ценится.

Код: http://jsfiddle.net/pimvdb/RemPF/1/

Спасибо .. Raam

Answer 1

Вам не хватает закрывающего} перед вашим </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]; 
}

Answer 2

1. Вы не останавливаете функцию printColorAndGroup с помощью }.
2. Вы должны использовать объект для пар ключ / значение, а не массив.
3. Возможно, вы захотите использовать буквенную запись для объекта.
4. Внутри функции onchange вы можете передать выбор с помощью this. Так что select.options[...] тогда будет возможно и чище.
5. Вместо имен вы также можете использовать идентификаторы, чтобы вам не приходилось каждый раз беспокоиться о [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:

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

со следующим JavaScript:

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