javascript - Jquery - 必须向 Jquery 对象添加剩余 [0]

Question

这个问题我已经遇到过好几次了，起初我试图忽略它。我有一个选择元素:

HTML:

<div class="col-sm-10">
    <select class="form-control input-sm" id="my_select" name="contracting_party_legal_entity">
    </select>
</div>

现在我想用选项以编程方式填充我的选择。看起来我应该使用 $('#my_select').appendChild($option) 来实现这个，但是不行!除非我编写 $('#my_select')[0].appendChild($option)，否则我会收到错误消息 appendChild is not a function。为什么有必要使用剩余 [0] 的原因？我的语法有问题吗？

Answer 1

$ 是一个 jQuery 函数。它返回所有匹配元素的数组。

因此要选择特定元素，您需要选择数组索引。

您可以使用 $('#my_select').get(0).appendChild($option) 并且 appendChild 是普通的 javascript 函数，它适用于元素而不适用于查询对象。试试 jQuery append 函数。

jQuery 追加函数示例:

$("#test").append("<option>hello</option>")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
  <option>Select box</select>
</select>