从select框中删除项目

如何从select框中删除项目或添加项目？ 我正在运行jQuery，如果这使得任务更容易。 下面是一个示例select框。

<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> 

Answer 1

删除一个选项：

 $("#selectBox option[value='option1']").remove(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 2

你可以用这个删除select的项目：

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

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

Answer 3

 window.onload = function () { var select = document.getElementById('selectBox'); var delButton = document.getElementById('delete'); function remove() { value = select.selectedIndex; select.removeChild(select[value]); } delButton.onclick = remove; } 

要添加项目，我会创build第二个select框，并：

 var select2 = document.getElementById('selectBox2'); var addSelect = document.getElementById('addSelect'); function add() { value1 = select2.selectedIndex; select.appendChild(select2[value1]); } addSelect.onclick = add; 

不是jQuery。

Answer 4

删除一个项目

 $("select#mySelect option[value='option1']").remove(); 

添加项目

 $("#mySelect").append('<option value="option1">Option</option>'); 

检查一个选项

 $('#yourSelect option[value=yourValue]').length > 0; 

删除选定的选项

 $('#mySelect :selected').remove(); 

Answer 5

这应该做到这一点：

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

Answer 6

我发现jQuery的select框操作插件对于这种types的东西很有用。

您可以通过索引，值或正则expression式轻松删除项目。

 removeOption(index/value/regex/array[, selectedOnly]) Remove an option by - index: $("#myselect2").removeOption(0); - value: $("#myselect").removeOption("Value"); - regular expression: $("#myselect").removeOption(/^val/i); - array $("#myselect").removeOption(["myselect_1", "myselect_2"]); 

要删除所有选项，您可以执行$("#myselect").removeOption(/./); 。

Answer 7

我发现两个页面似乎有帮助，它是为ASP.Net编写的，但是同样的东西应该适用：

1. 如何使用jQuery从下拉列表中添加/删除项目
2. jQueryselect器expression式

Answer 8

dynamic添加/删除值不使用硬编码：

//dynamic地从select中删除值

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

//添加dynamic值来select

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

Answer 9

以下链接将有所帮助 –

http://api.jquery.com/remove/

http://api.jquery.com/append/

Answer 10

只是为了增加任何人的看法，你也可以：

 $("#selectBox option[value='option1']").hide(); 

和

 $("#selectBox option[value='option1']").show(); 

Answer 11

JavaScript的

 function removeOptionsByValue(selectBox, value) { for (var i = selectBox.length - 1; i >= 0; --i) { if (selectBox[i].value == value) { selectBox.remove(i); } } } function addOption(selectBox, text, value, selected) { selectBox.add(new Option(text, value || '', false, selected || false)); } var selectBox = document.getElementById('selectBox'); removeOptionsByValue(selectBox, 'option3'); addOption(selectBox, 'option5', 'option5', true); 

 <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> 

Answer 12

我不得不从select中删除第一个选项，没有ID，只有一个类，所以我成功地使用了这个代码：

 $('select.validation').find('option:first').remove(); 

Answer 13

我只是想build议另一种方式来添加一个option 。 也可以这样做，而不是将value和text设置为string：

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

当dynamic添加选项的值和文本时，这是一个不太容易出错的解决scheme。

Answer 14

如果有人需要删除select内的所有选项，我做了一个litle函数。

希望对你有帮助

 var removeAllOptionsSelect = function(element_class_or_id){ var element = $(element_class_or_id+" option"); $.each(element,function(i,v){ value = v.value; $(element_class_or_id+" option[value="+value+"]").remove(); }) } 

只需要运行

 removeAllOptionsSelect("#contenedor_modelos"); 

Answer 15

这是select框的HTML

 <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> 

当你想完全删除并从select框中添加选项，那么你可以使用这个代码

 $("#selectBox option[value='option1']").remove(); $("#selectBox").append('<option value="option1">Option</option>'); 

有时我们需要从select框中隐藏和显示选项，但不能删除，那么你可以使用这个代码

  $("#selectBox option[value='option1']").hide(); $("#selectBox option[value='option1']").show(); 

有时需要从select框中删除选定的选项

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

当你需要删除所有的选项，然后这个代码

 ('#selectBox').empty(); 

当需要第一个选项或最后的时候这个代码

 $('#selectBox').find('option:first').remove(); $('#selectBox').find('option:last').remove();