我的代码可在IE中运行,但在Safari,Firefox和Opera中会中断。(大惊喜)
document.getElementById("DropList").options.length=0;
搜索之后,我了解到length=0
它是不喜欢的。
我已经尝试过,...options=null
并且var clear=0; ...length=clear
结果相同。
我一次要对多个对象执行此操作,因此我正在寻找一些轻量级的JS代码。
您可以使用以下内容清除所有元素。
var select = document.getElementById("DropList");
var length = select.options.length;
for (i = length-1; i >= 0; i--) {
select.options[i] = null;
}
要删除的HTML元素的选项select
,可以使用以下remove()
方法:
function removeOptions(selectElement) {
var i, L = selectElement.options.length - 1;
for(i = L; i >= 0; i--) {
selectElement.remove(i);
}
}
// using the function:
removeOptions(document.getElementById('DropList'));
删除options
倒退很重要;该remove()
方法重新排列了options
集合。这样,可以确保要删除的元素仍然存在!
如果您希望使用轻量级的脚本,请使用jQuery。在jQuery中,删除所有选项的解决方案如下:
$("#droplist").empty();
可能不是最干净的解决方案,但绝对比一一删除更简单:
document.getElementById("DropList").innerHTML = "";
这是最好的方法:
function (comboBox) {
while (comboBox.options.length > 0) {
comboBox.remove(0);
}
}
这是一个简短的方法:
document.getElementById('mySelect').innerText = null;
一行,没有,没有JQuery,很简单。
我想指出的是,原来的问题已不再与今天有关。该解决方案甚至有更短的版本:
selectElement.length = 0;
我已经测试过这两个版本都可以在Firefox 52,Chrome 49,Opera 36,Safari 5.1,IE 11,Edge 18,Android上的最新版本的Chrome,Firefox,三星Internet和UC浏览器,iPhone 6S上的Safari,Android 4.2上运行。 2个股票浏览器。我认为可以断定它与目前存在的任何设备绝对兼容,因此我建议使用这种方法。
function removeOptions(obj) {
while (obj.options.length) {
obj.remove(0);
}
}
这是一个现代的纯JavaScript
document.querySelectorAll('#selectId option').forEach(option => option.remove())
与PrototypeJS:
$('yourSelect').select('option').invoke('remove');
如果使用的是JQuery,并且选择控件的ID为“ DropList”,则可以通过以下方式删除其选项:
$('#DropList option').remove();
实际上,它适用于任何选项列表,例如数据列表。
希望能帮助到你。
请注意,一个选择可以同时具有
-optgroup和-options
集合
作为其子项。
所以,
方法1
var selectElement = document.getElementById('myselectid');
selectElement.innerHTML = '';
方法#2
var selectElement = document.getElementById('myselectid');
selectElement.textContent = '';
我测试了,两者都可以在Chrome上运行。
我喜欢更简单,更老式的方法#1。
尝试
document.getElementsByTagName("Option").length=0
或者也许看一下removeChild()函数。
或者,如果您使用jQuery框架。
$("DropList Option").each(function(){$(this).remove();});
使用JQuery是更漂亮,更简短和更聪明的方法!
$('#selection_box_id').empty();
这可以用来清除选项:
function clearDropDown(){
var select = document.getElementById("DropList"),
length = select.options.length;
while(length--){
select.remove(length);
}
}
<select id="DropList" >
<option>option_1</option>
<option>option_2</option>
<option>option_3</option>
<option>option_4</option>
<option>option_5</option>
</select>
<button onclick="clearDropDown()">clear list</button>
倒退。原因是每次删除后尺寸都会减小。
for (i = (len-1); i > -1; i--) {
document.getElementById("elementId").remove(i);
}
var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i < length; i++) {
select.options[i].remove();
}
希望这段代码对您有帮助
我认为那是最好的解决方案。是
$(“#myselectid”)。html('');
最简单的解决方案是最好的,因此您只需要:
var list = document.getElementById('list');
while (list.firstChild) {
list.removeChild(list.firstChild);
}
<select id="list">
<option value="0">0</option>
<option value="1">1</option>
</select>
物品应反向取出,否则将导致错误。另外,我不建议您简单地将值设置为null
,因为这可能会导致意外行为。
var select = document.getElementById("myselect");
for (var i = select.options.length - 1 ; i >= 0 ; i--)
select.remove(i);
或者,如果您愿意,可以使其具有以下功能:
function clearOptions(id)
{
var select = document.getElementById(id);
for (var i = select.options.length - 1 ; i >= 0 ; i--)
select.remove(i);
}
clearOptions("myselect");
var select = document.getElementById('/*id attribute of your select here*/');
for (var option in select){
select.remove(option);
}
上面答案的代码需要稍作更改才能删除完整列表,请检查这段代码。
var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i < length;) {
select.options[i] = null;
length = select.options.length;
}
刷新长度,它将从下拉列表中删除所有数据。希望这会帮助某人。
while(document.getElementById("DropList").childNodes.length>0)
{
document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[0]);
}
如果必须支持IE,并且选择列表中有100多个项目,我强烈建议您考虑使用以下功能替换选择:
function clearOptions(select) {
var selectParentNode = select.parentNode;
var newSelect = select.cloneNode(false); // Make a shallow copy
selectParentNode.replaceChild(newSelect, select);
return newSelect;
}
select参数应该是来自jquery选择器或document.getElementBy调用的元素。这样做的唯一缺点是,您丢失了已连接到选择的事件,但是当它从函数中返回时,您可以轻松地重新附加它们。我正在使用一个约有3000个项目的选择,并且在IE9上需要4秒钟才能清除选择,因此我可以使用新内容对其进行更新。这样几乎可以立即做到。
对于Vanilla JavaScript,有一种简单而优雅的方法可以做到这一点:
for(var o of document.querySelectorAll('#DropList > option')) {
o.remove()
}
今天,我遇到了同样的问题,重新加载选择框时,我做了如下操作。(在普通JS中)
var select = document.getElementById("item");
select.options.length = 0;
var opt = document.createElement('option');
opt.value = 0;
opt.innerHTML = "Select Item ...";
opt.selected = "selected";
select.appendChild(opt);
for (var key in lands) {
var opt = document.createElement('option');
opt.value = lands[key].id;
opt.innerHTML = lands[key].surveyNo;
select.appendChild(opt);
}
var select =$('#selectbox').val();
文章标签:html-select , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!