關(guān)于firefox下js中動(dòng)態(tài)組裝select時(shí)指定option的selected屬性的失效
Posted on 2012-06-07 08:34 timelyxyz 閱讀(1560) 評(píng)論(0) 編輯 收藏問(wèn)題描述:firefox下js中動(dòng)態(tài)組裝select時(shí)指定option的selected屬性的失效
有問(wèn)題的代碼如下:
1 // 加載select列表
2 var teaOption ='', ownerSel = $("ownerSel");
3 for(var i = 0; i < teaList.length; i ++){
4 var teacher = teaList[i];
5 if(teacher.isDeleted === false){
6 var tid = teacher.id, tName = teacher.fullName, newOption;
7 var flag = ((tid === formerOwnerId) ? 'selected="selected"' : '');
9 teaOption += '<option value="'+tid+'" '+ flag +'>'+ tName +'</option>';
10 }
11 }
12 ownerSel.html(teaOption);
2 var teaOption ='', ownerSel = $("ownerSel");
3 for(var i = 0; i < teaList.length; i ++){
4 var teacher = teaList[i];
5 if(teacher.isDeleted === false){
6 var tid = teacher.id, tName = teacher.fullName, newOption;
7 var flag = ((tid === formerOwnerId) ? 'selected="selected"' : '');
9 teaOption += '<option value="'+tid+'" '+ flag +'>'+ tName +'</option>';
10 }
11 }
12 ownerSel.html(teaOption);
此時(shí)selected屬性無(wú)效,ff中的select顯示的是option列表的最后一個(gè)。
原因貌似是這樣子:
selected這個(gè)屬性本身是沒(méi)有錯(cuò)的,你在頁(yè)面開(kāi)始加載的前寫(xiě)好,然后瀏覽器加載的時(shí)候就會(huì)讀取這個(gè)dom,然后有selected這個(gè)效果。
但是通過(guò)js動(dòng)態(tài)組裝的select的html代碼,在ie下我剛剛試了下可行(我剛剛失敗的原因是三目運(yùn)算符處少加了一個(gè)括號(hào));firefox下,在請(qǐng)求加載的同時(shí)加載dom元素,但是ff內(nèi)核可能是為了追求速度,而省略了一些dom的屬性的加載,導(dǎo)致了selected這個(gè)屬性的失效。
解決方法(我用的是mootools):在加載的時(shí)候?qū)ption元素通過(guò)如下解決
1 // 加載select列表
2 var ownerSel = $("ownerSel");
3 for(var i = 0; i < teaList.length; i ++){
4 var teacher = teaList[i];
5 if(teacher.isDeleted === false){
6 var tid = teacher.id, tName = teacher.fullName, newOption;
7 if(tid === formerOwnerId)
8 newOption = new Element('option', {"value" : tid, "selected" : "selected"}).html(tName);
9 else
10 newOption = new Element('option', {"value" : tid}).html(tName);
11 ownerSel.grab(newOption); // 將新的element插入到select中
12 }
13 }
2 var ownerSel = $("ownerSel");
3 for(var i = 0; i < teaList.length; i ++){
4 var teacher = teaList[i];
5 if(teacher.isDeleted === false){
6 var tid = teacher.id, tName = teacher.fullName, newOption;
7 if(tid === formerOwnerId)
8 newOption = new Element('option', {"value" : tid, "selected" : "selected"}).html(tName);
9 else
10 newOption = new Element('option', {"value" : tid}).html(tName);
11 ownerSel.grab(newOption); // 將新的element插入到select中
12 }
13 }