在瀏覽器上隱藏select option

由於部分瀏覽器(IE sucks)不支援option.style='display:none';的樣式

導致有時候想要動態隱藏/顯示某些下拉式選單的時候就要另想辦法處理

在stackoverflow上有人提出了用一個隱藏span包住該option

這個方法的確可以達到隱藏/顯示option

可是我發現了一些bug

Bug 1:
在chrome上如果一開始就加上span則該node會永遠消失

```html
<select>
<option value="1">1</option>
<span class="toggleOption" style="display: none;"><option value="2">2</option></span>
<option value="3" selected>3</option>
</select>
```

Bug :2
在chrome39上,執行以下隱藏option[value=2],則$('select').val()有機會不會是3

```html
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
```
$('select>option[value=2]').toggleOption(false);


這兩個是很嚴重的bug

那不如我自己寫一個jquery的plugin吧

傳送門

例子放在jsfiddle

只要使用$('#myselect').selectOption();初始化你的select

之後就可以用
```js
$('#myselect').hideAllOption();
$('#myselect').showAllOption();
$('#myselect').hideOption(':gt(1)');
$('#myselect').showOption(':gt(1)');
$('#myselect').showOption('[value=1]');
```
等的api去顯示或隱藏option囉!