如何删除选择框的所有选项，然后添加一个选项并使用 jQuery 选择它？

IT技术 javascript jquery html-select option dynamic-html
2021-01-13 13:18:34

使用核心jQuery，如何删除选择框的所有选项，然后添加一个选项并选择它？

我的选择框如下。

<Select id="mySelect" size="9"> </Select>

编辑：以下代码有助于链接。但是，（在 Internet Explorer 中）.val('whatever')没有选择添加的选项。（我确实在.append和 中使用了相同的“值” .val。）

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

编辑：试图让它模仿此代码，每当页面/表单重置时，我都会使用以下代码。此选择框由一组单选按钮填充。.focus()更接近，但该选项并未像.selected= "true". 我现有的代码没有问题 - 我只是想学习 jQuery。

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

编辑：选定的答案接近我所需要的。这对我有用：

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

但是这两个答案都让我找到了最终的解决方案..

6个回答
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
@BrockHensley，我相信这个答案的真正优雅在于与 end() 函数的正确链接。你的建议也会奏效。来自 jQuery API 文档：“大多数 jQuery 的 DOM 遍历方法在 jQuery 对象实例上运行并产生一个新的对象实例，匹配一组不同的 DOM 元素。当发生这种情况时，就好像新的一组元素被压入堆栈“这是在对象内部维护的。每个连续的过滤方法都会将一个新元素集推送到堆栈中。如果我们需要一个旧元素集，我们可以使用 end() 将这些集从堆栈中弹出。”
2021-03-12 13:18:34
请注意，您还可以将 option/attr/text 拆分为： .append($("<option></option>").attr("value", '123').text('ABC!')
2021-03-17 13:18:34
@nickf：我有同样的问题，但我需要添加一组复选框而不是更改下拉列表的复选框，但我的复选框来自 xml。这不起作用
2021-03-24 13:18:34
这是我能够重建我的菜单并在 iOS PhoneGap 上的 jQuery Mobile 中更改所选选项的唯一方法。之后还需要刷新菜单。
2021-03-30 13:18:34
@BrockHensley 你甚至可以走得更远 .append($("<option></option>", {'value':'123'}).text('ABC!')
2021-04-02 13:18:34 
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
我在这个解决方案中遇到了一个奇怪的故障。它的填充部分没问题，但是当我尝试选择一个值（在我的情况下是一天）时，我可以控制台记录该值，但选择字段中显示的值保留在第一个值中......我可以不解决它：/
2021-03-17 13:18:34
只是出于好奇，“空”比“查找”快吗？似乎是这样——因为 'find' 会使用一个选择器，而 'empty' 只会蛮力清空元素。
2021-03-23 13:18:34
@DanEsparza 我让你成为了 jsperf；empty()结果当然更快;) jsperf.com/find-remove-vs-empty
2021-03-23 13:18:34
@TakácsZsolt 也许您应该.val('whatever')像马特的回答那样在链的末尾添加一个。
2021-03-27 13:18:34
.empty() 适用于 materialize，而 .remove() 不起作用
2021-03-31 13:18:34

为什么不只使用普通的javascript？

document.getElementById("selectID").options.length = 0;
这不会造成内存泄漏吗？选项元素现在不可访问但仍被分配。
2021-04-02 13:18:34
我同意这是删除所有选项的最简单的解决方案，但这只能回答问题的一半......
2021-04-11 13:18:34

如果您的目标是从选择中删除除第一个之外的所有选项（通常是“请选择一个项目”选项），您可以使用：

$('#mySelect').find('option:not(:first)').remove();
这应该是答案。所有其他人都故意删除第一个，以便之后重新创建它，我不喜欢；这也意味着他们也首先在某处存储了第一个选项。
2021-03-21 13:18:34

我在 IE7 中有一个错误（在 IE6 中工作正常），使用上述 jQuery 方法会清除DOM 中的选择，但不会清除屏幕上的选择。使用 IE 开发人员工具栏，我可以确认选择已被清除并拥有新项目，但在视觉上，选择仍然显示旧项目 - 即使您无法选择它们。

解决方法是使用标准的 DOM 方法/属性（如海报原件所用）来清除而不是 jQuery - 仍然使用 jQuery 添加选项。

$('#mySelect')[0].options.length = 0;
我也必须在 ie6 中使用这种方法，因为 .empty() 导致包含在隐藏容器中的选择框即使在父隐藏时也变得可见。
2021-03-12 13:18:34
+1 这是最易读的（在我看来）并且在 jsPerf 链接（@vzwick 链接）中，接受的答案慢了 34%（Opera 20）
2021-03-25 13:18:34
事实证明，这种方法的性能也更高一点（大约 1%）：jsperf.com/find-remove-vs-empty
2021-04-11 13:18:34
其它你可能感兴趣的问题
上一篇Bower 和 npm 有什么区别？ 下一篇反向循环真的更快吗？