IEのinnerHTML読み取り専用

6977 ワード

JavaScript プロトタイプ IE 安徽省にある地名。 DWR

一つは、作成したカスケードコントロールで、動的にselectのoptionを作成する時に発生する問題です. 最初のやり方はバックグランドでdwrを通してキーの値を返した時に、プロトタイプのテンプレートを使ってinnertHTMLを生成してselectノードにセットします.この方式はFFで正常に処理できますが、ieで打ち殺しても効果がありません.だからこの方法は捨てられました. 次に、document.creat Elementによってノードを作成し、その後、オプトモーションノード動的なappedをselectノードの下に置いて、この方法はieの下で正常に表示されるが、ffの上では異常であり、常に「String contains invalid character」を提示する.この方法は解きほぐしても捨てられます. 最後の方法は現在の方式です. select.options[select.options.length]=new Option(name,value);この方法はやっとフォックスとieで正常に示されました.ネット上の膨大な知識庫に感謝します.膨大な知識庫の中で、私と同じ問題を持っている人をたくさん見つけました.同時に解決方法を見つけました.最後の方法はw 3 cが提案した、互換性が一番いいと言われています. 二つ目の問題は、改ページコントロールを書く時、表のinnersを交替する時にいつも報告して、運行期間は異常です. 今確認したのはFFの中でこのように置き換えても大丈夫です.またIEの中ではだめです.ieの中のtableなどのinnerHTMLは読み取り専用ですから.最後のやり方は、いっそテーブルをdivに含めて、表の外にあるdivのinnerHTMLを差し替えることです.

selectとoptionの操作:
プロジェクトの項目を空にする

// document.all.objSelect.options.length = 0;

第一行を残したら

// document.all.objSelect.options.length = 1;

selectオプションにValue=「paraValue」のItemがあるかどうかを判断します.

function jsSelectIsExitItem(objSelect,objItemValue)
{
     var isExit = false;
     for(var i=0;i<objSelect.options.length;i++)
     {
         if(objSelect.options[i].value == objItemValue)
         {
             isExit = true;
             break;
         }
     }     
     return isExit;
}

selectオプションにItemを追加します.

function jsAddItemToSelect(objSelect,objItemText,objItemValue)
{
     //      
     if(jsSelectIsExitItem(objSelect,objItemValue))
     {
         alert(" Item Value     ");
     }
     else
     {
         var varItem = new Option(objItemText,objItemValue);
//       objSelect.options[objSelect.options.length] = varItem;
         objSelect.options.add(varItem);
         alert("    ");
     }   
}

selectオプションからItemを削除します.

function jsRemoveItemFromSelect(objSelect,objItemValue)
{
     //      
     if(jsSelectIsExitItem(objSelect,objItemValue))
     {
         for(var i=0;i<objSelect.options.length;i++)
         {
             if(objSelect.options[i].value == objItemValue)
             {
                 objSelect.options.remove(i);
                 break;
             }
         }       
         alert("    ");           
     }
     else
     {
         alert(" select       ");
     }   
}

selectオプションのvalue=「paraValue」のtextを変更すると「paraText」となります.

function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)
{
     //      
     if(jsSelectIsExitItem(objSelect,objItemValue))
     {
         for(var i=0;i<objSelect.options.length;i++)
         {
             if(objSelect.options[i].value == objItemValue)
             {
                 objSelect.options[i].text = objItemText;
                 break;
             }
         }    alert("    ");           
     }
     else
     {
         alert(" select       ");
     }   
}

select中text=「paraText」の最初のItemを選択するように設定します.

function jsSelectItemByValue(objSelect,objItemText)
{   
     //      
     var isExit = false;
     for(var i=0;i<objSelect.options.length;i++)
     {
         if(objSelect.options[i].text == objItemText)
         {
             objSelect.options[i].selected = true;
             isExit = true;
             break;
         }
     }     
     //Show   
     if(isExit)
     {
         alert("    ");           
     }
     else
     {
         alert(" select       ");
     }   
}

selectのvalue=「paraValue」のItemを選択します.

//document.all.objSelect.value = objItemValue;

selectの現在選択されているアイテムのvalueを取得します.

//var currSelectValue = document.all.objSelect.value;

selectの現在選択されているアイテムのテキストを取得します.

//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

selectの現在選択されている項目のIndexを取得します.

//var currSelectIndex = document.all.objSelect.selectedIndex;

完全な例

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>js  select   ,  ,  ,         </title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
function watch_ini(){ //   
for(var i=0; i<arguments.length; i++){
   var oOption=new Option(arguments[i],arguments[i]);
   document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ //   
   var oOption=new Option(f.word.value,f.word.value);
   f.keywords[f.keywords.length]=oOption;
}
function watch_sel(f){ //   
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ //   
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ //   
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ //   
var set = "";
for(var i=0; i<f.keywords.length; i++){
set += f.keywords[i].text + ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
<script language="javascript">
<!--
watch_ini(" "," "," "," "," "," "," "," "); //      
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="  " onclick="watch_add(this.form);" />
<input type="button" value="  " onclick="watch_mod(this.form);" />
<input type="button" value="  " onclick="watch_del(this.form);" />
<input type="button" value="  " onclick="watch_set(this.form);" />
</form>
</body>
</html>

jsタイミング機能の紹介