- ベストアンサー
Mac版ＩＥ５でのinnerHTMLの動作について
プルダウンメニュー（セレクトボックス）を２つ表示し、一つ目のメニューが選ばれると、それによって二つ目のメニューを変化させようとしています。WINDOWSのIEでは問題なく動作するのですが、MacのIE5では正しく動作しません。 フォームの画面では一つ目のメニューを選んだ時に二つ目のメニューの選択項目が変化し問題ないのですが、sendボタンを押したときにＣＧＩに二つ目のメニューの内容が伝わりません。MacのIE5ではinnerHTMLを使うと正しく動作しないのでしょうか。 ----------------フォーム------------------ <HTML> <HEAD> <SCRIPT language=javascript> <!-- var s0=""; s0 += '<option value="option0-1">option0-1</option>' s0 += '<option value="option0-2">option0-2</option>' var s1=""; s1 += '<option value="option1-1">option1-1</option>' s1 += '<option value="option1-2">option1-2</option>' function change() { switch (Number(document.form1.select1.selectedIndex)) { case 0: document.all.obj1.innerHTML = '<select name="select2">' + s0 + '</select>'; break; case 1: document.all.obj1.innerHTML = '<select name="select2">' + s1 + '</select>'; break; } } //--> </SCRIPT> </HEAD> <BODY> <FORM name=form1 action=test-cgi.cgi method=get encType=multipart/form-data> <SELECT onchange=change(); name=select1> <OPTION value="option0">option0</OPTION> <OPTION value="option1">option1</OPTION> </SELECT> <BR> <SPAN id=obj1> <SELECT name=select2></SELECT> </SPAN> <INPUT type="submit" value="send"> </FORM> </BODY> </HTML>
- tomtomoo
- お礼率90% (141/156)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
再度。 ソースの減量を計るのであれば、スクリプトに一ひねり加えればよいでしょう。 先のものに手を加えてみました。 <html> <head> <script type="text/javascript"> <!-- var n=0; optTxt = new Array(); optVal = new Array(); for (i=0; i<2; i++){ //「i<2」の2の値は、select1のoptionの項目数と同じにする optTxt[i]= new Array(); //option要素のテキストを格納する配列 optVal[i]= new Array(); //option要素のvalue属性を格納する配列 } /* 以上、二次元配列を作成 */ optTxt[0][0]="option0-1"; optVal[0][0]="option0-1"; optTxt[0][1]="option0-2"; optVal[0][1]="option0-2"; /* 以上、select1のoption0で用意するselect2のoption要素のテキストと値を配列に格納 */ optTxt[1][0]="option1-1"; optVal[1][0]="option1-1"; optTxt[1][1]="option1-2"; optVal[1][1]="option1-2"; optTxt[1][2]="option1-3"; optVal[1][2]="option1-3"; /* 以上、select1のoption1で用意するselect2のoption要素のテキストと値を配列に格納 */ for (j=0; j<optTxt.length; j++){ if (n<optTxt[j].length){ n=optTxt[j].length;} } /* 以上、select2のoption要素の最大数を取得 */ function change() { for (i=0; i<n; i++){ document.form1.select2.options[i].text = ""; document.form1.select2.options[i].value = ""; } /* 以上で用意してあるオプション要素の表示と値を全消去 */ x=document.form1.select1.selectedIndex; for (k=0; k<optTxt[x].length; k++){ document.form1.select2.options[k].text=optTxt[x][k]; document.form1.select2.options[k].value=optVal[x][k]; } /* 以上でオプション要素を書き換え */ } function check(){ if (document.form1.select2.value!=""){ document.form1.submit();} else{ return false; } } //--> </script> </head> <body> <form name="form1" action="test-cgi.cgi" method="get" onsubmit="check(); return false;"> <select onChange="change();" name="select1"> <option value="option0">option0</option> <option value="option1">option1</option> </select> <br> <select name="select2"> <script type="text/javascript"><!-- document.open(); for (op=0; op<n; op++){ document.write("<option></option>"); } /* JavaScriptからoption要素を項目の最大数分書き出す */ document.close(); // --></script> </select> <input type="submit" value="send"> </form> </body> </html> select2のoption項目は、head内の二次元配列部分で定義するように造ってあります。 ご質問によれば、innerHTMLを使う方法ではうまくいかないようですので、代替の方法としてinnerHTMLを使わないものを提示しています。 一応、手元のリファレンスではMacIE5.xでも動作するソースと紹介されているものを、改造していますが、動作確認は取っていません。 こちらも参考まで。 たびたび失礼しました。
その他の回答 (3)
- NQI
- ベストアンサー率48% (25/52)
私のMac(Mac OS X 10.1.5 / IE5.2.3)で、このJALのページは、正しく表示されます。ボタンを押した後の動作ももちろん正しいです。ソースをご覧になって、研究されてはいかがでしょうか？ http://www.jal.co.jp/dom/jtime/main.html
お礼
回答ありがとうございました。参考になりました。
可能であれば、DHTML的にセレクトボックス内の要素を変更するのではなく、オプション要素の内容をJavaScriptから書き換える方法を取るのではいかがでしょうか。 「document.form名.select名.options[index].text」でオプション要素の表示内容、「document.form名.select名.options[index].value」で各オプション要素が持つvalue属性にアクセスできますので、それを書き換える方法で代用できるのではないかと思います。 こうすると、Netscapeでも動作してくれるでしょう。 具体的にソースを書いてみました。 <html> <head> <script language=javascript> <!-- function change() { for (i=0; i<document.form1.select2.options.length; i++){ document.form1.select2.options[i].text = ""; document.form1.select2.options[i].value = ""; } /* 以上で用意してあるオプション要素の表示と値を全消去 */ switch (Number(document.form1.select1.selectedIndex)) { case 0: document.form1.select2.options[0].text = "option0-1"; document.form1.select2.options[0].value = "option0-1"; document.form1.select2.options[1].text = "option0-2"; document.form1.select2.options[1].value = "option0-2"; break; case 1: document.form1.select2.options[0].text = "option1-1"; document.form1.select2.options[0].value = "option1-1"; document.form1.select2.options[1].text = "option1-2"; document.form1.select2.options[1].value = "option1-2"; document.form1.select2.options[2].text = "option1-3"; document.form1.select2.options[2].value = "option1-3"; break; /* 以上でオプション要素を書き換え */ } } function check(){ if (document.form1.select2.value!=""){ document.form1.submit();} else{ return false; } } //--> </script> </head> <body> <form name="form1" action="test-cgi.cgi" method="get" enctype="multipart/form-data" onsubmit="check(); return false;"> <select onchange="change();" name="select1"> <option value="option0">option0</option> <option value="option1">option1</option> </select> <br> <select name="select2"> <option></option> <option></option> <option></option> <option></option> <option></option> <option></option> </select> <input type="submit" value="send"> </form> </body> </html> このソースでは、上記の方法でオプションを書き換えるようにしてあります。 オプション要素は、想定できる最大項目数の分だけ用意してください。 また、サブミットされた時、あまった分のオプション要素が空の値で送られるのを止めるために、onSubmitで送信されるセレクト要素の内容が空ではないかをチェックして、空の場合は送信しないようにもしてあります。 Macが手元にないので最終的な確認は取っていませんし、CGIとの連携についてもチェックしていませんので、参考程度に…
お礼
回答ありがとうございました。さっそく試してみます。 ただ、教えていただいた方法ですと、オプション要素が多くなった時にソースがかなり大きくなりそうです。innerHTML（あるいは同様の方法）を使ってMac版IE5でうまく動作する方法がわかる方がいらっしゃれば、教えてください。
- asuca
- ベストアンサー率47% (11786/24626)
マックのIEの仕様だとおかしくなることが多いですね。 netscapeだとうまく動くことが多くWindowsとほとんど変わりなく動かせるのですが。 JAVA南下を使うときは特にマックで誤動作することが多いです。 これはOS X版のIEでも同じです。
補足
そのようですね。なにかよい解決策はないでしょうか。
お礼
教えていただいたソースを参考にして、innerHTMLの部分を書きなおしましたが、なんとかうまくいきそうです。本当にありがとうございました。