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

【问题标题】：javascript obtain value of select option without submitting formjavascript在不提交表单的情况下获取选择选项的值
【发布时间】：2014-07-19 12:32:42
【问题描述】：

我试图在不提交表单的情况下获取输入选择选项的值（需要在显示实时结果时保持可用）。然后我需要将此值与稍后插入到数组中的全局变量一起使用。因为我不能使用提交，所以如果用户更改选项（即可能使用 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，我明白了。我更新了上面的脚本以反映我得到的大部分答案——这并没有解决我的核心问题。在脚本中跟踪输入选项值是没有问题的；我需要将该值作为全局变量。由于某种原因，我做不到。

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

它应该能够跟踪选择选项（已经可以），然后必须能够在单独的函数中使用这个值——在这种情况下，将它插入到段落字段“show”中。

【问题讨论】：

标签： javascript forms select

【解决方案1】：

不要使用内联 JavaScript。

试试这个（避免全局变量）：

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

})();

DEMO

【讨论】：

@user3180105，为了澄清起见，该函数被包装在所谓的“闭包”中，因此select_val 只能在闭包内访问。这让您可以更好地控制全局命名空间。
这是一个更干净的解决方案，我的回答只是解决您问题的一种方法。消化这个解决方案并利用未来的模式会更好
我的整个问题是我需要将此输入选项用作全局变量 - “colorInput”。
@user3180105 您需要将它移动到它应该工作的 onchange 处理程序中。查看我的编辑。

【解决方案2】：

首先，我建议你不要使用内联 onchange 属性。

你可以试试这个（见jsfiddle）：

document.getElementById('color').onchange = function() {
    var color = this.value;

    console.log(color);
};

更好的是，使用addEventListener:

document.getElementById('color').addEventListener('change', function() {
    var color = this.value;

    console.log(color);
});

【讨论】：

除了不使用内联js，我已经有了这个功能。整个问题是我无法访问 onchange 脚本之外的值。

【解决方案3】：

你可以试试

var  colorInput;    
function colorCalc(value) {
    colorInput = value;
    console.log(colorInput);
}

我认为问题在于您试图从方法返回中设置 var 但在调用该方法时您没有给它一个值

当更改事件使用所选值触发它时，您应该让该方法设置您的值

function colorCalc(value) {
    return value;
}
var colorInput = colorCalc(/*there is no value here value == undefined so will return undefined*/);
console.log(colorInput);

【讨论】：