Question

是否有最佳方法将option隐藏在select标签中？我想在option标签中隐藏一些select，例如

    <select>
      //number
      <option value="">-Please Select-</option>    
      <option class="number" value="1">1</option> 
      <option class="number" value="2">2</option> 
      <option class="number" value="3">3</option> 
      //English
      <option class="english" value="A">A</option> 
      <option class="english" value="B">B</option> 
      <option class="english" value="C">C</option> 
    </select>
<script>    
    var number = document.getElementsByClassName("number");
    var english = document.getElementsByClassName("english");

    if(show_enlish){
     for (i = 0; i < number.length; i++) {
      number[i].style.display =  'none'; //hidden number 1 2 3
     }else{
      for (i = 0; i < english.length; i++) { 
      english[i].style.display =  'none'; //hidden english abc
     }
    }
</script>

我正在尝试使用此代码隐藏option标签。是否有隐藏option标签的最佳方法？

Answer 1

使用document.getElementsByClassName('number')[0].remove();（具有循环索引或forEach()原型）来动态删除项目。

您代码中的更新循环为：

for (i = 0; i < number.length; i++) {
    // keep using index 0 as the DOM array becomes smaller as you remove the element
    english[0].remove(); 
}

或者，如果您使用的是ES6，则可以使用Array.from()将NodeList转换为数组，然后使用forEach()：

Array.from(english).forEach(element => {
    element.remove();
});

Answer 2

您可以使用可见性CSS属性。...

可见性：visible | hidden | collapse | initial | inherit;

或创建一个名为hide的className

.hide{
visbibility:hidden;
}

然后使用JS将className添加到选项中

Answer 3

除了您无法隐藏在某些浏览器（例如IE和Safari）之外，事实。您可以使用Jquery并获得一些更好的代码

$('<someSelector>').change(function(){
    if(number){
        $('.english').addClass('hide');
        $('.number').removeClass('hide');
    }else{
        $('.number').addClass('hide');
        $('.english').removeClass('hide');
    }
});

有什么最好的方法来隐藏选择选项吗？

3 个答案: