如何从选择框中删除项目或向其中添加项目?我正在运行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>
当前回答
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。
其他回答
也许其他人需要一种基本的方法来清除选择:
document.getElementById(SELECT_ID).innerHTML = "";
我只是想建议另一种增加选择的方法。 除了将值和文本设置为字符串外，还可以这样做:
var option = $('<option/>')
.val('option5')
.text('option5');
$('#selectBox').append(option);
在动态添加选项的值和文本时，这是一个较不容易出错的解决方案。
移除一个项目
$("select#mySelect option[value='option1']").remove();
添加项目
$("#mySelect").append('<option value="option1">Option</option>');
检查一个选项
$('#yourSelect option[value=yourValue]').length > 0;
删除选定的选项
$('#mySelect :selected').remove();
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。
以下链接将是有帮助的-
http://api.jquery.com/remove/
http://api.jquery.com/append/
