为什么我无法获取定义到选择中的选项的 value 属性的值？答案

【问题标题】：Why I can't obtain the value of the value attribut of the option defined into a select?为什么我无法获取定义到选择中的选项的 value 属性的值？
【发布时间】：2016-02-03 17:55:29
【问题描述】：

我是 JavaScript 和 JQuery 的新手，在尝试检索与 select 的选定选项相关的值时遇到以下问题。

所以，进入我的页面：

<select id="selAttivitaSelezionata" class="form-control valid" name="selAttivita" aria-invalid="false">
    <option value="valida">Valida Progetto</option>
    <option value="invalida">Rimuovi Validazione</option>
</select>

然后，每次用户在前一个选择中选择一个选项时，我都会执行以下 JQuery 代码：

$("#selAttivitaSelezionata").change(function() {
    //alert("TIPOLOGIA PROGETTO CAMBIATA");

    var sel = $("#selAttivitaSelezionata");
    var val = sel.value;
    alert(val);

    $("#statoProgettoLabel").hide();
    $("#selStatoProgetto").hide();
});

所以，如您所见，我首先在具有 id="selAttivitaSelezionata" 的 DOM 中选择 select 对象，然后尝试通过 获取所选值>sel.value，然后我将它打印到一个警报弹出窗口中

问题是警报是空的。使用 FireBug 调试器，我看到 sel 变量已正确初始化，但 val 变量是 undefined 作为由 sel.value 获得的值。

为什么？我错过了什么？如何获取 value 属性 的值（valida 或 invalida）？

Tnx

【问题讨论】：

节点元素<select ...> 确实有一个value 属性，但是一旦被包裹在jQuery 中，你必须使用jQuery 方法，在这种情况下是val() 方法来检索@ 987654326@ 属性，或者，您可以使用 this.value。

标签： javascript jquery html

【解决方案1】：

因为你有这个：

var sel = $('#selAttivitaSelezionata');

这使得 sel 成为一个 jQuery 对象。

这个：

var val = sel.value;

应该是这样的：

var val = sel.val();

.val() 是用于检索值的 jQuery 方法。

您可以使用$(this) 使这变得更好：

$("#selAttivitaSelezionata").change(function() {
    var val = $(this).val();
    $("#statoProgettoLabel, #selStatoProgetto").hide();
});

【讨论】：

在这种情况下最好使用单个选择元素：this.value
只有this answer 解释为什么sell.value 不起作用。 :)
@Tushar：是的，但你的答案是唯一会让人们对 VanillaJS 的引用感到困惑的答案。没有多少人，尤其是像 OP 这样的初学者，知道 VanillaJS 实际上只是普通的旧 Javascript。 VanillaJS 是作为一个笑话而创建的，我认为它不应该用来引用 Javascript。说“Javascript”有什么问题？ stackoverflow.com/questions/20435653/what-is-vanillajs

【解决方案2】：

这是您要查找的内容：

var val = sel.val();

这里是对jQuery文档http://api.jquery.com/val/的参考

【讨论】：

【解决方案3】：

您不需要两个元素，只需将一个元素与.val() jQuery 函数一起使用即可。

工作示例

$("#selAttivitaSelezionata").change(function() {
  var val = $(this).val();
  console.log(val);

  $("#statoProgettoLabel").hide();
  $("#selStatoProgetto").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selAttivitaSelezionata" class="form-control valid" name="selAttivita" aria-invalid="false">
  <option value="valida">Valida Progetto</option>
  <option value="invalida">Rimuovi Validazione</option>
</select>

.val() - jQuery API Documentation

【讨论】：

即使使用 $(this).val();会工作。只是一点点改进（我知道问题就是这样）
好建议，修改了我的答案。

【解决方案4】：

sel 是 jQuery 对象，你不能对它使用 Javascript 方法。

在其上使用val() 获取值。

sel.val();

如果你想使用 Javascript 方法，

var sel = $("#selAttivitaSelezionata")[0];
var val = sel.value;

【讨论】：

【解决方案5】：

不要在“更改”处理程序中再次查询 DOM； jQuery 给你一个元素的引用（this 的值）：

$("#selAttivitaSelezionata").change(function() {
  var sel = $(this);
  var val = sel.val();

  // ...
});

【讨论】：