碎碎念

最近遇到的問題與解法，紀錄一下。

問題：如何在不同瀏覽器下隱藏<select>中某個<option>

解答：

在經過一連串的TRY & ERROR終於找出最後的解決辦法。

解法A：使用.hide()&.show()

可在chrome & Firefox使用。

但是在IE & safari無效。

解法B：使用.wrap("<span style='display:none'></span>");與.unwrap();

可在IE使用。

但是在IE以外的瀏覽器會產生選擇的選項與實際選到的選項不一致的問題。

ex:

<select>

    <option value="A">A</option>

    <option value="B">B</option>

</select>

我們把選項A隱藏變成

<select>

    <span style='display:none'><option value="A">A</option></span>

    <option value="B">B</option>

</select>

在瀏覽器中只看得到選項B，而我們選了選項B

但是！

瀏覽器紀錄的卻是選項A，select的值送出後卻是A！

雖然選項A表面上看不到，但實際上還是存在的，這樣會導致資料不一致的問題！

解法C：使用$(this).prop('disabled', true);與$(this).prop('disabled', false);

可在所有瀏覽器下使用。

最後大絕招，直接設成disabled，在瀏覽器中雖然看得到看是不能選。

p.s. 補一下如何判斷瀏覽器

http://yuanann.pixnet.net/blog/post/25466276

<script>
    function check_browser()
    {
        //support : safari, opera, msie, mozilla 
        if($.browser.msie){
            alert("IE");
            return IE ;
        }
        
        if($.browser.mozilla){
            alert("mozilla");
            return mozilla ;
        }
    }

</script>