如何从选择框中删除项目或向其中添加项目?我正在运行jQuery,这应该使任务更容易。下面是一个示例选择框。

<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>    
</select>

当前回答

删除一个选项:

$ (" # selectBox选项[value = option1’]”)。移除(); <剧本剧本src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < / > <选择=“selectBox”id=“selectBox”> <选项价值= >“option1 option1 < /选项> <选项价值= >“option2 option2 < /选项> <选项价值= >“option3 option3 < /选项> <选项价值= >“option4 option4 < /选项> 选择< - >

添加一个选项:

$ (" # selectBox”)。append(<选项价值=“option5 " > option5 < /选项>); <剧本剧本src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < / > <选择=“selectBox”id=“selectBox”> <选项价值= >“option1 option1 < /选项> <选项价值= >“option2 option2 < /选项> <选项价值= >“option3 option3 < /选项> <选项价值= >“option4 option4 < /选项> 选择< - >

其他回答

你可以这样删除选定的项目:

$("#selectBox option:selected").remove();

如果你有一个列表而不是下拉列表,这是很有用的。

这应该做到:

$('#selectBox').empty();

我只是想建议另一种增加选择的方法。 除了将值和文本设置为字符串外,还可以这样做:

var option = $('<option/>')
                  .val('option5')
                  .text('option5');

$('#selectBox').append(option);

在动态添加选项的值和文本时,这是一个较不容易出错的解决方案。

删除一个选项:

$ (" # selectBox选项[value = option1’]”)。移除(); <剧本剧本src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < / > <选择=“selectBox”id=“selectBox”> <选项价值= >“option1 option1 < /选项> <选项价值= >“option2 option2 < /选项> <选项价值= >“option3 option3 < /选项> <选项价值= >“option4 option4 < /选项> 选择< - >

添加一个选项:

$ (" # selectBox”)。append(<选项价值=“option5 " > option5 < /选项>); <剧本剧本src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < / > <选择=“selectBox”id=“selectBox”> <选项价值= >“option1 option1 < /选项> <选项价值= >“option2 option2 < /选项> <选项价值= >“option3 option3 < /选项> <选项价值= >“option4 option4 < /选项> 选择< - >

动态添加/删除值,无需硬代码:

//从select中动态删除值

$("#id-select option[value='" + dynamicVal + "']").remove();

//添加动态值

$("#id-select").append('<option value="' + dynamicVal + '">' + dynamicVal + '</option>');