在提交之前从输入中设置变量值答案

【问题标题】：Set variable value from input before submit在提交之前从输入中设置变量值
【发布时间】：2012-02-12 22:07:32
【问题描述】：

首先，我有一个表单中的这个输入。

<select id="entry_14">
     <option value="Woman">Woman</option>
     <option value="Man">Man</option>
</select>

然后我声明了这个变量。

var mygender = document.getElementById('entry_14').value;

但是，当我 document.write 时，在用户进行选择之前它已经显示“男人”，而在选择女人之后，它仍然显示男人。

每次用户选择其中一个选项时，如何设置此变量的值以更改？

【问题讨论】：

标签： javascript forms variables option

【解决方案1】：

它会立即执行，因为您的代码不在函数中。您需要在选择更改时调用此函数。将onchange 处理程序添加到您的select. 在此示例中，我将this.value 传递给函数，这是您的选择列表值。最后，您可以使用该值做任何您想做的事情。

<select id="entry_14" onchange="myfunction(this.value);">
    <option value="Woman">Woman</option> 
    <option  value="Man">Man</option>
</select>

<script>
    function myfunction(val) {
        document.write(val);
    }
</script>

【讨论】：

在 IE 中，如果用户使用光标键导航选项，则每次按下向上或向下键时都会调用 onchange 监听器。
mrtsherman，您的解决方案有效，现在它写入了正确的选定值，但是......它替换了页面上的所有其他内容。当用户做出选择时，整个表单就消失了，而“女人”是您在页面左上角看到的唯一内容。我可以 document.write 到同一/原始页面中的另一个位置，同时将表单保留在屏幕上吗？感谢您的帮助！
是的，您可以修改现有元素的内容以反映输出。这是首选方式。 jsfiddle.net/eZg5h

【解决方案2】：

声明一个onchangeeventhandler。

document.getElementById('entry_14').onchange = function(){
var mygender =  this.value;
document.write(mygender);
}

【讨论】：

+1 - 实际上我比我自己更喜欢这个答案，因为它不依赖内联 javascript 声明。

【解决方案3】：

为

<select id="entry_14" onChange="updateMyGender();">
    ....
</select>

<script>
    var mygender = document.getElementById('entry_14').value;
    function updateMyGender()
    {
        mygender = document.getElementById('entry_14').value;
    }
</script>

【讨论】：

【解决方案4】：

我想你正在寻找这个

var mygender= document.getElementById('entry_14');
var gender= mygender.options[mygender.selectedIndex].value;// for value 

var gender= mygender.options[mygender.selectedIndex].Text;//for text

【讨论】：

selectedIndex 只需要支持古代浏览器。