如何通过更改 html 表单中的选择选项来更改变量？
每当用户在我的 html 表单的选择列表中更改他的答案时，我都会尝试更改我的变量“年份”。我想将“年份”更改为当前选择的任何年份，因此如果用户选择“2022”，我希望我的变量年份等于 2022。我尝试使用“事件”作为函数 setYear() 的参数，但这并不成功。任何帮助将不胜感激。
var year;
<script type="text/javascript">
function setYear(a) {
year = a;
}
</script>
<form>
<tr>
<td>Year: </td>
<td><select name="Year" onchange="setYear(event)">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select></td>
</tr>
</form>
富国沪深浏览 188回答 3
3回答
-
慕哥9229398
你的代码：var year;<script type="text/javascript"> function setYear(a) { year = a; }</script><form> <tr> <td>Year: </td> <td><select name="Year" onchange="setYear(event)"> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> </select></td> </tr></form>您在标签var外声明变量<script>。因为，var是在<script>标签之外声明的，所以它对 javaScript 函数不可见。此外，您正在var设置事件参数。此代码可能有效。<script type="text/javascript"> var year; function setYear(a) { year = a; }</script><form> <tr> <td>Year: </td> <td><select name="Year" onchange="setYear(this.value)"> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> </select></td> </tr></form> -
12345678_0001
您可以使用this来引用 select DOM 元素：<script type="text/javascript"> let year function setYear(a) { year = a }</script><select name="Year" onchange="setYear(this.value)"> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option></select>然而，像这样的内联 JavaScript 有点过时了。对于更现代的方法，使用document.querySelector获取 DOM 节点，并注册一个事件侦听器，该侦听器在它更改时触发。这样，您不必混合 HTML 和 JS：<script type="text/javascript"> let year const yearSelect = document.querySelector('#yearSelect') yearSelect.addEventListener('change', e => { year = e.target.value })</script><select id="yearSelect" name="Year"> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option></select> -
智慧大石
首先，您不应该使用<td>并且<tr>没有<table>标签。标签定义表格行。标签定义了表格中的标准单元格<tr>。<td>然后，在 onchange 事件中，您应该this作为参数传递。它将引用 HTML 的 select DOM 元素。在您的功能中，您现在可以知道您选择的年份是哪一年。select.options[select.selectedIndex].value;选择：您的 DOM 元素。options：你选择的所有选项作为一个数组select.selectedIndex：用户选择的索引（对应一个数字）value：选择的选项的值。<!DOCTYPE html><html dir="ltr"> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <form> <label>Year:</label> <select name="Year" onchange="setYear(this)"> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> </select> </form> </body> <script type="text/javascript"> var year; function setYear(select) { year = select.options[select.selectedIndex].value; } </script></html>
随时随地看视频慕课网APP
相关分类
JavaScript