解决IE下select option不支持display none 的问题

2,419 阅读1分钟

问题描述:

在我开发的过程中,有需求是做几个select框的去重,即关联的几个select框option全相同,但不能选择同一个的option。我首先想到的是在select中增加onchange()事件,当select的value改变时,隐藏掉其他select的这个option选项。最初我用的是jQuery的show()与hide()方法直接实现,但后来我发现这种方法在ie上存在隐藏不掉的问题。

<select name="" id="">
    <option value="1">选项一</option>
    <option value="2" style="display:none;">选项二</option>//隐藏
    <option value="3">选项三</option>
    <option value="4">选项四</option>
</select>

在谷歌上是正常隐藏的,但在ie上是无法隐藏的,且所有的ie浏览器都无法隐藏

解决方法:

//隐藏掉选项二
<select name="" id="">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
    <option value="4">选项四</option>
</select>
<button onclick="toggle("show")"></button>
<button onclick="toggle("hide")"></button>

//js
function toggle(type) {
      var option = $("select option[value="2"]");
      if(type == "show"){
        var span = option.parent("span");
        span.children().clone().replaceAll(span);//去除包裹的span
      }else{
        option.wrap("<span style="display:none"></span>");//外层包裹一个span元素
      }
 }

其原理是需要隐藏选项时,把对应的option外包裹一层span,设置span为display:none,如下图:

这样可解决所有浏览器的兼容问题。