201401151149[jQuery] 在不同瀏覽器下隱藏<option>的方法

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

問題:如何在不同瀏覽器下隱藏<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>

回應
關鍵字
累積 | 今日
loading......
    沒有新回應!





Powered by Xuite
塞巴
G