ベストアンサー

Mac版ＩＥ５でのinnerHTMLの動作について

2003/09/04 11:14

プルダウンメニュー（セレクトボックス）を２つ表示し、一つ目のメニューが選ばれると、それによって二つ目のメニューを変化させようとしています。WINDOWSのIEでは問題なく動作するのですが、MacのIE5では正しく動作しません。フォームの画面では一つ目のメニューを選んだ時に二つ目のメニューの選択項目が変化し問題ないのですが、sendボタンを押したときにＣＧＩに二つ目のメニューの内容が伝わりません。MacのIE5ではinnerHTMLを使うと正しく動作しないのでしょうか。 ----------------フォーム------------------ <HTML> <HEAD> <SCRIPT language=javascript>  </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）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#199778

2003/09/05 01:15 回答No.4

再度。ソースの減量を計るのであれば、スクリプトに一ひねり加えればよいでしょう。先のものに手を加えてみました。 <html> <head> <script type="text/javascript">  </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"></script> </select> <input type="submit" value="send"> </form> </body> </html> select2のoption項目は、head内の二次元配列部分で定義するように造ってあります。ご質問によれば、innerHTMLを使う方法ではうまくいかないようですので、代替の方法としてinnerHTMLを使わないものを提示しています。一応、手元のリファレンスではMacIE5.xでも動作するソースと紹介されているものを、改造していますが、動作確認は取っていません。こちらも参考まで。たびたび失礼しました。

質問者

お礼 2003/09/06 22:34

教えていただいたソースを参考にして、innerHTMLの部分を書きなおしましたが、なんとかうまくいきそうです。本当にありがとうございました。

その他の回答 (3)

NQI
ベストアンサー率48% (25/52)

2003/09/04 22:11 回答No.3

私のMac(Mac OS X 10.1.5 / IE5.2.3)で、このJALのページは、正しく表示されます。ボタンを押した後の動作ももちろん正しいです。ソースをご覧になって、研究されてはいかがでしょうか？ http://www.jal.co.jp/dom/jtime/main.html

参考URL：: http://www.jal.co.jp/dom/jtime/main.html

質問者

お礼 2003/09/06 22:10

回答ありがとうございました。参考になりました。

noname#199778

2003/09/04 19:40 回答No.2

可能であれば、DHTML的にセレクトボックス内の要素を変更するのではなく、オプション要素の内容をJavaScriptから書き換える方法を取るのではいかがでしょうか。「document.form名.select名.options[index].text」でオプション要素の表示内容、「document.form名.select名.options[index].value」で各オプション要素が持つvalue属性にアクセスできますので、それを書き換える方法で代用できるのではないかと思います。こうすると、Netscapeでも動作してくれるでしょう。具体的にソースを書いてみました。 <html> <head> <script language=javascript>  </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との連携についてもチェックしていませんので、参考程度に…

質問者

お礼 2003/09/04 22:07

回答ありがとうございました。さっそく試してみます。ただ、教えていただいた方法ですと、オプション要素が多くなった時にソースがかなり大きくなりそうです。innerHTML（あるいは同様の方法）を使ってMac版IE5でうまく動作する方法がわかる方がいらっしゃれば、教えてください。

asuca
ベストアンサー率47% (11786/24626)

2003/09/04 15:03 回答No.1

マックのIEの仕様だとおかしくなることが多いですね。 netscapeだとうまく動くことが多くWindowsとほとんど変わりなく動かせるのですが。 JAVA南下を使うときは特にマックで誤動作することが多いです。これはOS X版のIEでも同じです。

質問者

補足 2003/09/04 19:24

そのようですね。なにかよい解決策はないでしょうか。

関連するQ&A

変数にフォーム名を指定したい
下のスクリプトは、プルダウンメニューの項目を選択するとフォームにそのvalueを渡すものです。フォームに original　という　name　を指定しています。 putselect関数の中の document.reg.original の　original　を直で打つのではなく、 putselectの引数として、指定したのですがどのようにすると良いでしょうか？ JavaScript function putselect(obj){ document.reg.original.value = obj.options[obj.selectedIndex].value; } HTML <form name="reg"> <input name="original"> <select onchange="putselect(this)"> <option >#作品の選択</option> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> </form> <hr> こうなってほしい。 function putselect(obj,フォーム名の変数){ document.reg.フォーム名の変数.value = obj.options[obj.selectedIndex].value; } HTML <form name="reg"> <input name="original"> <select onchange="putselect(this,original)"> <option >#作品の選択</option> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> </form> <hr> これと同じ動作であれば、nameでなくidなどでも構いません。よろしくお願い致します。
- ベストアンサー
- JavaScript
innerhtmlで出た値から、ifで返り値を出す
innerhtmlで出た値から、要素を判断し、if文で返り値を求めることは可能でしょうか。具体的にはinnerhtmlで、2未満の数値が出た場合、りんごを、4未満であればみかんと返すようにいたしたいです。なお、回答が長くなることから、script文のみの記述でOKですが、 script文は省略なさらないでください。  <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { judge(); } function selectboxChange111() { judge(); } function judge() { /* この場合は、varではなくletを使う。*/ let val101 = document.forms.form101.Select101.value; let val111 = document.forms.form111.Select111.value; /* そもそも両方が当てたら、メッセージを出すのなら、outputは1つでいいのでは？ */ let target = document.getElementById("output201"); let target2 = document.getElementById("output202"); if ((val101 == "要素101")&&(val111 == "要素111")) { target.innerText = "合っています。"; target2.innerText = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output201"></div> <div id="output202"></div> <div id="output203"></div> <div id="output204"></div> <div id="output205"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
2個選択することで初めて表示というのができない
<!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (value == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // function selectboxChange11() { var value = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (value == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> ↑はjsの分ですが、 2個選んだら初めてイベントが発生するプログラムを作成しているのですが、いかんせんうまくいきません。恐らく、var value = document.forms.form1.Select1.value;のところで、躓いているのだと思います。 document.formsにカンマをつけてみたり、さらに、両端に[]をつけてみたり、いろいろ試しましたが、うまくいきません。それとも、重ねること自体ができないのでしょうか。どうしたらいいのでしょうか。
- 締切済み
- JavaScript
IE以外のブラウザで対応するには
超初心者です、見よう見まねで以下のような、セレクト1を選ぶとセレクト2は「選択」(2を選べばその逆）になる外部javascriptとhtmlを作ってみました。IEでは動く（option valueにリンクする）のですが他（サファリやファイアーフォックス）では全く動きません。どこか変なところがあるのでしょうか？それともIE以外では諦めなければならないでしょうか？ご教授の程、よろしくお願い致します。 #外部javascript（ファイルネーム　select.js） var s; function reSel(c) { if(s&&(s!=c)) s.options[0].selected=true; s=c; } function A_Li() { parent.myNew.location.href=document.Link1.select1.options.value; 　　Sel=document.Link1.select1.selectedIndex; 　　Ms=document.Link1.select1.options[Sel].value; reSel(document.Link1.select1); } function B_Li() { parent.myNew.location.href=document.Link1.select2.options.value; 　　Sel=document.Link1.select2.selectedIndex; 　　Ms=document.Link1.select2.options[Sel].value; reSel(document.Link1.select2); } #以下　HTMLソース <script src="./select.js" type="text/javascript" ></script> <FORM name="Link1"> <select name="select1" onChange="A_Li()"> <option value= new.html selected>選択</option> <option value= aaa.html>aaa</option> <option value= bbb.html>bbb</option> <option value= ccc.html>ccc</option> </select> <select name="select2" onChange="B_Li()"> <option value= new.html selected>選択</option> <option value= ddd.html>ddd</option> <option value= eee.html>eee</option> <option value= fff.html>fff</option> </select> </FORM >
- ベストアンサー
- JavaScript
プルダウンを2個選び、その結果に基づき、値を返す。
プルダウンを2個選び、その結果に基づき、値を返したいです。以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、紐づけができません。ですので、打開案をご教授願えたら幸いです。
- 締切済み
- JavaScript
リストボックスを連動させて・・・その２
直前の質問で下記の回答をいただいたものです。質問では２つのリストボックスを連動させたサンプルの回答をいただきましたが、ひょっとして、リストボックスの個数が何個でも対応させることはできないでしょうか。つまり、リストボックスのnameなどをscript部分に記さずに・・。ここまでサンプルをもらっても改造できないので質問。 (^^; ■JavaScript <SCRIPT language=JavaScript>  </SCRIPT> ■フォーム <FORM NAME="form"> <select name="s1" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="big">big</OPTION> <OPTION VALUE="small">small</OPTION> </SELECT> <select name="s2" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="red">red</OPTION> <OPTION VALUE="white">white</OPTION> </SELECT> <INPUT TYPE="text" SIZE=50 NAME="text"> </FORM>
- ベストアンサー
- JavaScript
netscapeでうまくいかない
次のようなJavascriptを使ったページを作ったところ、IEではうまく表示、更新されるのですが、Netscapeでは更新しようとすると、selectの中身がなくなってしまいました。IEとNetscapeでソースを見たところ、次のようにBODYの中が変化していました。どなたか、対策を教えていただけませんでしょうか。 IEのソース <body> </p><form name="form1" method="GET" action="list.cgi"> <p align=right> <strong>表示形式</strong> <select name="list" onChange="getAction()"> <script language="JavaScript">  </script> </select> </p> </form> </body> Netscapeのソース <body> </p><form name="form1" method="GET" action="list.cgi"> <p align=right> <strong>ノスシィキチシー</strong> <select name="list" onChange="getAction()"> <OPTION value="num:hl" selected>リスト順［新→旧］</OPTION> <OPTION value="num:lh">リスト順［旧→新］</OPTION> </SELECT> </P> </FORM> </BODY> </HTML>
- 締切済み
- JavaScript
セレクトボックスの中を一部隠したい ( IE )
セレクトボックスの中を一部隠したいのですが、IEでは隠れてくれません。firefoxなどでは、ちゃんと隠れるのですが、IEではどのようにすれば隠れるのでしょうか？（例）　以下のセレクトボックスで、0・１のみ表示されるようにしたいです。 <select name="s" id="s"> <option value="0" name="s[0]" id="s[0]" >0</option> <option value="1" name="s[1]" id="s[1]" >1</option> <option value="2" name="s[2]" id="s[2]" style="display:none;">2</option> </select> また、javascriptで隠した部分を表示・非表示したいのですが、あわせて教えていただけないでしょうか。 firefox など、では以下で変化があるのですが、 document.getElementById('s[2]').style.display='block';　　　//表示 document.getElementById('s[2]').style.display='none';　　　//非表示 IE　ではうんともすんともいってくれません・・・ document.all('s[2]').style.display='block';　　　//表示 document.all('s[2]').style.display='none';　　　//非表示ちなみにテスト環境はIE7になります、よろしくお願いいたします。
- ベストアンサー
- HTML
VBScriptでHTMLのForm内のselectをコントロールするには？
javaScriptの例はたくさんあるので大よそは理解できたのですが、VBScriptでやるとうまく動きません。 document.form_name.id_name.options.length は効いているようです。 document.form_name.id_name.options[0].text document.form_name.id_name.options[0].value では値が入りません。どうすれば動くでしょうか？ ----test.html---- <script language="VBScript">  </script> <html> <head><title>test</title></head> <body> <form name="term" METHOD=POST ACTION="report.asp"> 時: <select onChange="change" name="hour"> <option>23 <option>24 </select> <BR> 分: <select name="minute"> <option>00 <option>10 <option>20 <option>30 <option>40 <option>50 </select> <input type=submit name="confirm" value="レポート"> </form> </body> </html>
- ベストアンサー
- Visual Basic
プルダウンメニューがＩＥだとエラー
買い物かごをプルダウンメニューで作ったのですが、firefoxではちゃんと次のページ（かごに入れて、かごの中身を表示）に行くのに、IEだと、ちゃんとかごに入りません（ショッピングカートに入れられない、とエラーが出る）何故でしょうか？このタグを打っているのですが（タグ紹介のページでコピった）、間違っていますか？ <script language="javascript">  </script> <form method="post"> <select onChange="goToUrl(this)"> <option value="">▽選択してください <option value="http://～">○○ <option value="http://～" >××</select> </form>
- ベストアンサー
- HTML

Mac版ＩＥ５でのinnerHTMLの動作について