如何通过更改 html 表单中的选择选项来更改变量？答案

【问题标题】：How do I change a variable with the change of a select option in an html form?如何通过更改 html 表单中的选择选项来更改变量？
【发布时间】：2020-07-02 04:57:33
【问题描述】：

每当用户在我的 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>

【问题讨论】：

year = a.target.value 你是这个意思吗？

标签： javascript html forms function parameters

【解决方案1】：

您的代码：

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>

您在 <script> 标记之外声明变量 var。因为，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>

【讨论】：

【解决方案2】：

不要在脚本之外声明var。

 <script type="text/javascript">
    var year;
    function setYear(a) {
        year = a.target.value;
    }
</script>

【讨论】：

【解决方案3】：

首先，在script 中定义var year，然后获取a.target.value 并在需要时使用它

<script type="text/javascript">
var year;
    function setYear(a) {
        year = a.target.value;
        console.log(year);
    }
</script>

【讨论】：

【解决方案4】：

您可以使用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>

【讨论】：

【解决方案5】：

首先，您不应该在没有<table> 标签的情况下使用<td> 和<tr>。
<tr> 标记定义表格行。 <td> 标签定义了表格中的标准单元格。

然后，在 onchange 事件中，您应该将this 作为参数传递。它将引用 HTML 的 select DOM 元素。在您的函数中，您现在可以知道您选择的年份是哪一年。

select.options[select.selectedIndex].value;
select: 你的 DOM 元素。
options: 你 select 的所有选项作为一个数组
select .selectedIndex：用户选择的索引（对应一个数字）
value：选中选项的值。

<!DOCTYPE html>
<html lang="en" 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>

【讨论】：