在下拉列表中动态添加和删除项目

Question

如何在jQuery中动态添加或删除下拉项？下面的代码不起作用

$("#dropdownId").remove("<option value='12'>testing</option>");
$("#dropdownId").add("<option value='12'>testing</option>");

有人可以建议这样做吗？

Answer 1

要添加元素，请使用.append()：

$('#dropdownId').append('<option value="12">testing</option>')

或.appendTo()：

$('<option/>', { val: 12, text: 'testing' }).appendTo('#dropdownId');

要删除，请以不同方式使用.remove()：

$('#dropdownId').find('option').filter(function ()
{
    return this.value === '12' && $(this).text() === 'testing';
}).remove();

---

作为一般性建议，您应该真正阅读API文档，了解这些简单的jQuery问题。例如，如果您已阅读the documentation for .add()，则会发现它没有按照您的想法执行。

Answer 2

为要删除的项目使用标准选择器，而不是传递html标记：

$('#dropdownId option[value="12"]').remove();
// or
$('#dropdownId').remove('option[value="12"]');

（我假设您没有多个具有相同值的选项。）

.remove()的（近似）反面是.append()：

$("#dropdownId").append("<option value='12'>testing</option>");

Answer 3

卸下：

$("#selectList option[value='2']").remove(); 

添加：

$('#selectList').append('<option>'+val+'</option>');

Answer 4

使用append代替add！

Answer 5

添加不是写法。 使用append（）之类的，

$("#dropdownId").append("<option value='12'>testing</option>");

这里有来自jQuery API的一些信息：http://api.jquery.com/append/