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

Question

How can I add or remove dropdown items dynamically in jQuery? Below code is not working

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

Can anyone suggest a way to do this?

Answer 1

To add elements, use .append() :

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

or .appendTo() :

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

To remove, use .remove() differently:

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

---

As a general recommendation, you should really read the API docs for simple jQuery questions like these. If you had read the documentation for .add() , for instance, you'd see that it does not do what you thought.

Answer 2

Use a standard selector for the item you want to remove, rather than passing html markup:

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

(I'm assuming you don't have more than one option with the same value.)

The (approximate) opposite of .remove() is .append() :

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

Answer 3

Remove:

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

Add:

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

Answer 4

使用append而不是add ！

Answer 5

add is not writing method. use append() like,

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

here's some information from jQuery API: http://api.jquery.com/append/