我如何从选择框中删除项目,或向选择框中添加项目?我正在运行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 option[value='option1']").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$("#selectBox").append('<option value="option5">option5</option>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
您可以用这个方法删除选中的项目。
$("#selectBox option: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。
我发现jQuery的选择框操作插件对这种类型的东西很有用。
你可以很容易地通过索引、值或重码删除一个项目。
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(/./);
。
我找到了两个页面,看起来很有帮助,它是为ASP.Net写的,但同样的东西应该适用。
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
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>
<!--结束代码段-->
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
jQuery(function($) {
$.fn.extend({
remove_options: function(value) {
return this.each(function() {
$('> option', this)
.filter(function() {
return this.value == value;
})
.remove();
});
},
add_option: function(text, value, selected) {
return this.each(function() {
$(this).append(new Option(text, value || '', false, selected || false));
});
}
});
});
jQuery(function($) {
$('#selectBox')
.remove_options('option3')
.add_option('option5', 'option5', true);
});
<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>
<!--结束片段-->
我必须从一个选择中删除第一个选项,没有ID,只有一个类,所以我成功地使用了这段代码。
$('select.validation').find('option:first').remove();
如果有人需要删除所有的选择内的选项,我做了一个小功能。
我希望你觉得它有用
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");
这是选择框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>
当你想从选择框中完全删除和添加选项时,你可以使用这个代码。
$("#selectBox option[value='option1']").remove();
$("#selectBox").append('<option value="option1">Option</option>');
有时我们需要隐藏和显示选择框中的选项,但不能删除,那么你可以使用这个代码。
$("#selectBox option[value='option1']").hide();
$("#selectBox option[value='option1']").show();
有时需要从选择框中删除所选的选项,然后再将其删除
$('#selectBox :selected').remove();
$("#selectBox option:selected").remove();
当你需要删除所有选项时,那么这段代码就可以了
('#selectBox').empty();
当需要第一个选项或最后一个选项时,就用这段代码。
$('#selectBox').find('option:first').remove();
$('#selectBox').find('option:last').remove();