[英]Remove item from dropdown list on page load (no jquery)
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.我不能通过索引,因为该列表是动态的,所以我必须使用值参数或渲染的实际文本。
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? 任何人都有办法隐藏选项D只是在页面加载时使用Javascipt所以用户永远不会看到该选项?
Thanks 谢谢
var select=document.getElementById('DD1');
for (i=0;i<select.length; i++) {
if (select.options[i].value=='D') {
select.remove(i);
}
}
I used window.addEventListener
it won't work on down-level browsers that don't support it. 我使用
window.addEventListener
它不适用于不支持它的低级浏览器。 I suggest creating your own addEvent method that abstracts the inconsistencies - if jQuery (or some other framework) is not allowed. 我建议创建自己的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);
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');
var selectbox = document.getElementById('DD1');
for(var i = 0; i < selectbox.options.length; i++)
{
if(selectbox.options[i].value == 'D')
selectbox.remove(i);
}
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);
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. 这没有经过测试,所以我不知道它是否会起作用。
you don't need this. 你不需要这个。 just a two line code is enough.
只需两行代码即可。
var Node1 = document.getElementById("DD1");
Node1.removeChild(Node1.childNodes[1]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.