Javascript 在页面加载时从下拉列表中删除项目（无 jquery）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7601691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove item from dropdown list on page load (no jquery)
提问by markiyanm
I have the following dropdown list:
我有以下下拉列表：
<select name="DD1" id="DD1">
<option value="B">B</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="R">R</option>
</select>
On page load I need to hide/delete option D. I can't go by the index because that list is dynamic so I have to use the value parameter or the actual text that gets rendered.
在页面加载时，我需要隐藏/删除选项 D。我不能通过索引，因为该列表是动态的，所以我必须使用 value 参数或呈现的实际文本。
I've tried finding the answer but all the solutions I came across use JQuery for this and I don't have the option to do this.
我试图找到答案，但我遇到的所有解决方案都为此使用了 JQuery，而我没有选择这样做。
Anyone have a way to hide option D just using Javascipt on page load so the user never sees that option?
任何人都可以通过在页面加载时使用 Javascipt 来隐藏选项 D，这样用户就永远不会看到该选项？
Thanks
谢谢
回答by VirtualTroll
var select=document.getElementById('DD1');
for (i=0;i<select.length; i++) {
if (select.options[i].value=='D') {
select.remove(i);
}
}
回答by xandercoded
I used window.addEventListenerit won't work on down-level browsers that don't support it. I suggest creating your own addEvent method that abstracts the inconsistencies - if jQuery (or some other framework) is not allowed.
我用window.addEventListener它在不支持它的下层浏览器上不起作用。我建议创建您自己的 addEvent 方法来抽象不一致 - 如果不允许使用 jQuery（或其他一些框架）。
window.addEventListener("load", function(){
var list = document.getElementById('DD1'), el;
for(var i in list.children){
el = list.children[i];
if(el.hasOwnProperty('value')) {
if(el.value == 'D') {
el.style.display = 'none';
break;
}
}
}
}, false);
回答by circusbred
Try looping over the options, checking the value, and if it matches, set it to null:
尝试循环选项，检查值，如果匹配，则将其设置为 null：
function removeByValue(id, value) {
var select = document.getElementById(id);
for (var i=0, length = select.options.length; i< length; i++) {
if (select.options[i] && select.options[i].value === value) {
select.options[i] = null;
}
}
}
removeByValue('DD1', 'D');
回答by Nick Tiberi
var selectbox = document.getElementById('DD1');
for(var i = 0; i < selectbox.options.length; i++)
{
if(selectbox.options[i].value == 'D')
selectbox.remove(i);
}
回答by Jordan Running
Since everyone else has proposed basically the same solution, here's a simpler solution if you have the benefit of only targeting modern browsers:
由于其他人都提出了基本相同的解决方案，如果您有仅针对现代浏览器的好处，这里有一个更简单的解决方案：
var el = document.querySelector('select[name=DD1] option[value=D]');
el.parentNode.removeChild(el);
Or, for every browser:
或者，对于每个浏览器：
var el;
if(typeof document.querySelector == 'function') {
el = document.querySelector('select[name=DD1] option[value=D]');
} else {
for(var child in document.getElementById('DD1').childNodes) {
if(child.textContent == 'D') {
el = child;
break;
}
}
}
el && el.parentNode.removeChild(el);
回答by CBRRacer
There's probably a little cleaner way to do this but I am rusty with javascript.
可能有一种更简洁的方法可以做到这一点，但我对 javascript 生疏了。
var options = documentgetElementsByTagName("option");
for(i=0; i<options.length; i++)
{
if(options[i].value == "D")
{
this.class += "displayNone";
}
}
.displayNone{ display: none; }
this is not tested so I don't know if it would work.
这没有经过测试，所以我不知道它是否有效。
回答by xecute
you don't need this. just a two line code is enough.
你不需要这个。两行代码就够了。
var Node1 = document.getElementById("DD1");
Node1.removeChild(Node1.childNodes[1]);
