在页面加载时从下拉列表中删除项目(无jquery)

Question

我有以下下拉列表:

<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>

在页面加载时我需要隐藏/删除选项D.我不能通过索引,因为该列表是动态的,所以我必须使用值参数或渲染的实际文本.

我已经尝试找到答案,但我遇到的所有解决方案都使用JQuery,我没有选择这样做.

任何人都有办法隐藏选项D只是在页面加载时使用Javascipt所以用户永远不会看到该选项？

谢谢

Answer 1

var select=document.getElementById('DD1');

for (i=0;i<select.length;  i++) {
   if (select.options[i].value=='D') {
     select.remove(i);
   }
}

Answer 2

我用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);

http://jsfiddle.net/UV6nm/2/