解決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,以下圖：

這樣可解決全部瀏覽器的兼容問題。