1. 程式人生 > >在IE11和Firefox下attr和prop的相容性問題(IE低版本和google沒有問題)

在IE11和Firefox下attr和prop的相容性問題(IE低版本和google沒有問題)

最近工作中遇到一個比較棘手的相容性問題,下面就分享一下解決過程吧

■背景說明:

左邊一個文字框,右邊一個下拉框,下拉框顯示從資料庫取出來的資料,功能要求左邊的文字框輸入右邊下拉框的value值,下拉框自動定位到

對應的資料,如果輸入的值下拉框沒有,則返回到為空的狀態

■現象
使用jquery語句$(this).attr('selected',true)進行選中設定,文字框輸入value值,選中下拉框對應的某個option時會出現下面兩種情況:
1.只有在IE11,Firefox瀏覽器中第一次輸入有效,當再次輸入剛剛輸入的value值選擇當前已經選中的option時就會返回到"請選擇"狀態,
用Firebug檢視select屬性時可以看到剛剛選擇的option是selected狀態,但是頁面顯示"請選擇",
2.只有在IE11,Firefox瀏覽器中輸入選中值之後,當回過來再次選擇之前選擇過的值時,也會返回到"請選擇"狀態
■原因
相比attr,prop是1.6.1才新出來的,兩者從中文意思理解,都是獲取/設定屬性的方法(attributes和properties)。
只是,window或document中使用.attr()方法在jQuery1.6之前不能正常執行,因為window和document中不能有attributes。
prop應運而生了。(我這邊的jquery版本是1.11.1)

■原始碼
$(this).attr("selected",true);
■改修案
$(this).prop("selected",true);