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

问题描述：

在我开发的过程中，有需求是做几个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,如下图：

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

转载于:https://juejin.im/post/5cdada49f265da035c6be8c3