从选择框中删除项目

IT技术 javascript jquery html html-select
2021-01-23 08:12:19

如何从选择框中删除项目或将项目添加到选择框中?我正在运行 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>
6个回答

删除一个选项:

$("#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>

添加一个选项:

$("#selectBox").append('<option value="option5">option5</option>');
<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>

如果您需要删除一个选项并选择另一个选项: $('#selectBox').val('option2').find('option[value="option1"]').remove();
2021-03-16 08:12:19
老实说,我认为通过 javascript 操作选择框的方式是有史以来最令人困惑的事情之一,即使您对选择器和 DOM 有相当好的理解。
2021-03-19 08:12:19

您可以使用以下命令删除所选项目:

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

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

它正在为我删除所有内容......等等我正在使用具有多个属性的 Select 。如何从多选中删除它?
2021-04-01 08:12:19
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;    
}

要添加该项目,我将创建第二个选择框并:

var select2 = document.getElementById('selectBox2');
var addSelect = document.getElementById('addSelect');

function add()
{
    value1 = select2.selectedIndex;
    select.appendChild(select2[value1]);    
}

addSelect.onclick = add;

虽然不是 jQuery。

@JBeckton:回顾 4 年前写的这篇文章,我嘲笑自己,你是对的 :)
2021-04-05 08:12:19

删除项目

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

添加项目

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

检查选项

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

删除选定的选项

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

这应该这样做:

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