Javascript在不提交表单的情况下获取select选项的值

javascript obtain value of select option without submitting form

本文关键字：获取 select 选项 情况下 Javascript 提交 表单      更新时间：2023-09-26

我试图在不提交表单的情况下获得输入选择选项的值(需要在显示实时结果时保持可用)。然后，我需要将该值与稍后将插入到数组中的全局变量一起使用。因为我不能使用submit，所以我需要找到一种方法来更新这个值，如果用户更改了选项(例如可能使用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。

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

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

首先，我建议您不要使用内联的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);
});

你可以试试

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);
相关文章：