javascript在不提交表单的情况下获取选择选项的值

Question

我试图在不提交表单的情况下获取输入选择选项的值(需要在显示实时结果时保持它可用)。然后我需要将此值与全局变量一起使用，以便稍后插入到数组中。因为我不能使用提交，所以我需要找到一种方法来在用户更改选项(即可能使用 onchange)时更新此值。

这是我目前拥有的(不起作用):

html

<select id="color" >
    <option value="">select:</option>
    <option value="blue">Blue</option>
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
</select>

JavaScript

document.getElementById('color').onchange = function() {
    var colorInput = this.value;
    console.log(colorInput);
};

已更新

好的，不使用内联 javascript，我明白了。我更新了上面的脚本以反射(reflect)我得到的大部分答案——这些答案没有解决我的核心问题。在脚本中跟踪输入选项值没有问题；我需要将值作为全局变量。出于某种原因，我做不到。

这是一个类似于我需要如何使用它的 jsfiddle:http://jsfiddle.net/agvRn/2/

它应该能够跟踪选择选项(已经可以)，然后必须能够在单独的函数中使用该值 - 在本例中将其插入段落字段“显示”。

Answer 1

不要使用内联 JavaScript。

试试这个(避免全局变量):

(function() {
    var select_val;
    document.getElementById('color').addEventListener('change', function() {
        select_val = this.value;
        document.getElementById("show").innerHTML = select_val;
    }, false);

})();

DEMO