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，我明白了。我更新了上面的脚本，以反映我得到的大多数答案 - 这些都没有解决我的核心问题。跟踪脚本中的输入选项值是没有问题的;我需要将值作为全局变量。出于某种原因，我无法做到。

这里有一个类似于我需要使用它的方式：http://jsfiddle.net/agvRn/2/

它应该能够跟踪选择选项（已经可以），然后必须能够在单独的函数中使用此值 - 在这种情况下将其插入段落字段＆＃34;显示＆＃34;。

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

Answer 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);
});

Answer 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);

javascript获取select选项的值而不提交表单

3 个答案: