如何使用jQuery设置.selectedIndex

Question

我有一些HTML选择:

<select class="form-control, dropdown" id="delperffrom" name="delperffrom">
. . .
<select class="form-control, dropdown" id="delperfto" name="delperfto">
. . .

我想将它们初始化为"无价值",所以有这个javascript,它有效:

document.getElementById("delperffrom").selectedIndex = -1;

..和这个jQuery,它没有:

$("#delperfto").selectedIndex = -1;

为什么jQuery不起作用？

Answer 1

的.selectedindex是财产DOM元素,而不是jQuery的.你可以改变它的DOM元素,或使用的jQuery .prop() 方法:

$("#delperffrom")[0].selectedIndex = -1; // change on dom element pulled from jQuery
$("#delperffrom").prop('selectedIndex',-1); // change with .prop() jquery method

Answer 2

因为$("#delperfto")不是 DOM 元素。它是一个 jQuery 对象，而 jQuery 对象没有属性.selectedIndex。jQuery 对象是它自己的对象类型，具有自己的属性和方法。它不具有与 DOM 元素相同的属性和方法。它通常有一种完成相同事情的方法，但通常使用不同的语法。

您可以从 jQuery 对象获取 DOM 元素并直接访问该 DOM 元素，如下所示：

$("#delperfto")[0].selectedIndex = -1;

或者

$("#delperfto").get(0).selectedIndex = -1;

或者，您可以使用 jQuery 的.prop()方法让它在每个 DOM 元素上设置所需的属性，如下所示：

$("#delperfto").prop("selectedIndex", -1);

在这种特定情况下，其中一个或另一个没有特别的优势，但是如果您的选择器返回了多个元素，如下所示：

$(".options").prop("selectedIndex", -1);

然后 jQuery.prop()方法会在选择器匹配的所有 DOM 元素上设置该属性，而不仅仅是第一个元素，这有时非常有用。