是否可以使用 jQuery Selector 获取下拉框数组

Posted 2023-05-07

【中文标题】是否可以使用 jQuery Selector 获取下拉框数组

【英文标题】：Is it possible to get an array of Dropdown boxes with jQuery Selector

【发布时间】：2022-01-23 18:21:20

【问题描述】：

我希望 div 中的所有下拉框都具有相同的动态选项

这适用于一个下拉列表

var ddl = $("#ddl_candidate_id");
for (k = 0; k < fileDetails.Headers.length; k++) 
    ddl.append("<option value='" + fileDetails.Headers[k] + "'>" + fileDetails.Headers[k] + "</option>");

但是如果我尝试使用选择器，代码会按照我的预期进行迭代，但我猜

var dropdowns = $('.selectMapping');

不是强类型为选择（下拉）

var dropdowns = $('.selectMapping');
for (ov = 0; ov < fileDetails.Headers.length; ov++) 
    for (dd = 0; dd < dropdowns.length; dd++) 
        dropdowns[dd].append("<option value='" + fileDetails.Headers[ov] + "'>" + fileDetails.Headers[ov] + "</option>");
    

感谢您的帮助。

【问题讨论】：

感谢 Carsten 为我所做的编辑

另外，添加：console.log($(".selectMapping").length) - 如果它为零 (0)，那么您的选择器找不到它们 - 除了推测之外，我们无能为力，除非您包含一些 html。

【参考方案1】：

无需循环遍历 jquery 集合，因为 .append 将应用于集合中的所有元素

var ddls = $(".select_class");
for (k = 0; k < fileDetails.Headers.length; k++) 
    ddls.append("<option value='" + fileDetails.Headers[k] + "'>" + fileDetails.Headers[k] + "</option>");

var ddl = $("select");
for (k = 1; k < 10; k++) 
  ddl.append("<option value='" + k + "'>" + k + "</option>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select></select>
<select></select>
<select></select>

---

关于您的代码为何不起作用：您的问题在于 dropdowns[dd].append(，因为它不再是 jquery 集合。 $("select")[0] 会给出一个 DOM 元素。

如果你想要 .eq(dd) 而不是 [dd] 那么你的 dd 循环就可以工作了。

var dropdowns = $('.selectMapping');
for (ov = 0; ov < fileDetails.Headers.length; ov++) 
    for (dd = 0; dd < dropdowns.length; dd++) 
        dropdowns.eq(dd).append("<option value='" + fileDetails.Headers[ov] + "'>" + fileDetails.Headers[ov] + "</option>");
    

如上所述，在这种情况下不需要这样做，但它完成了问题中提出的问题，这可能与不同的情况有关