如何使用 javascript 从表单中更改 var 的值答案

【问题标题】：How to change the value of a var from a form with javascript如何使用 javascript 从表单中更改 var 的值
【发布时间】：2013-11-16 16:06:45
【问题描述】：

我有一个表单，用户可以在其中选择他们想要查看的数据。

<form>
<div class="myvalues">
<select id="mySelect">
<option value="data1">value 1</option>
<option value="data2">value 2</option>
<option value="data3">value 3</option>
</select>
</div>
</form>

在我的 Javascript 部分（在 html 页面的 head 部分）我有下一个变量，

var dataFile = 'data1';

现在这是一个静态值（'data1'）但我想用上面表格中选择的选定值替换“data1”值我如何做到这一点？

【问题讨论】：

有 jQuery 吗？如果你这样做是微不足道的。
@isherwood 为什么你觉得没有 jQuery 就不是小事了？
在语法方面要简单得多，但你已经知道了。你为什么浪费时间写一个尖刻的评论而不是提供一个琐碎的答案？
因为我想知道为什么人们不能/不会在没有 jQuery 的情况下做这些琐碎的事情。 jQuery 很好，但你不需要它来做1+1。您为什么不向他展示 VanillaJS 解决方案，而不是“浪费时间”等待响应？
因为我不精通 JS 事件侦听器语法（不喜欢 onclick 属性），但我可以在短时间内从内存中帮助 jQuery。我们尽我们所能，对吧？

标签： javascript forms select var

【解决方案1】：

正如 Arthur 所说，您可以使用此代码获得选择的选项值。

var dataFile = document.getElementById("mySelect").value;

要在更改选择值时更新 dataFile 变量，您可以在元素的 onchange 事件上创建一个函数。

var selectElement = document.getElementById('mySelect');
selectElement.onchange = function(e){
    dataFile = document.getElementById("mySelect").value;
    console.log(dataFile);
}

Example

【讨论】：

查看我之前的评论，你的行也没有任何反应。
我需要您的其余代码来帮助您，在此代码中，dataFile 变量始终会选择当前值，但知道您现在想要什么

【解决方案2】：

如果我理解你的话，在 JavaScript 中你可以询问元素的值。

var element = document.getElementById("mySelect");
var dataFile = element.options[element.selectedIndex].value;

如果选择了第二个选项，这应该使 dataFile 具有值“data2” 如果你想要文本值，你可以使用它。

var element = document.getElementById("mySelect");
var dataFile = element.options[element.selectedIndex].text;

如果选择了第二个选项，这应该使 dataFile 的值为“value 1”

这对你有帮助吗？

【讨论】：

var dataFile 获取值“data2”（我使用警报框检查），但该值未在我拥有的其他脚本中使用。例如： var dataFile = 'data2' 加载带有地图和在该地图上绘制的轨迹的页面。如果我的脚本中有 >> 行，一切正常，但是当我使用您的示例时，没有任何反应并且页面保持空白。我假设未使用值 data2
这有点难以回答，因为缺少其他代码。我想如果您需要更多帮助，最好是问另一个问题，其中包含所有必要的代码。

【解决方案3】：

可以使用javascript的document.getElementById()函数获取当前值：

dataFile = document.getElementById('mySelect').value;

查看here 的简单演示。

【讨论】：