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.我不能通过索引，因为该列表是动态的，所以我必须使用value参数或渲染的实际文本。

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

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

由于

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/

Answer 3

尝试循环选项，检查值，如果匹配，则将其设置为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');

Answer 4

var selectbox = document.getElementById('DD1');
for(var i = 0; i < selectbox.options.length; i++)
{
    if(selectbox.options[i].value == 'D')
    selectbox.remove(i);
}

Answer 5

由于其他人都提出了基本相同的解决方案，如果您只有针对现代浏览器的优势，这里有一个更简单的解决方案：

var el = document.querySelector('select[name=DD1] option[value=D]');
el.parentNode.removeChild(el);

或者，对于每个浏览器：

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

Answer 6

可能有一些更干净的方法可以做到这一点但我生锈了javascript。

var options = documentgetElementsByTagName("option");
for(i=0; i<options.length; i++)
{
   if(options[i].value == "D")
   {
     this.class += "displayNone";
   }
}

.displayNone{ display: none; }

这未经过测试，因此我不知道它是否可行。

Answer 7

你不需要这个。只需两行代码即可。

var Node1 = document.getElementById("DD1");
Node1.removeChild(Node1.childNodes[1]);

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

7 个答案: