scriptによる読み込みのselect表示について
- 外部ファイルからHTMLを読み込ませる際、selectが上手く表示されない問題が発生しています。
- 特に<script>タグ内でのファイル読み込みに関連しており、radioやcheckboxは正常に表示されるが、selectだけが表示されない状態です。
- 対応策としては、他の方法でファイルを読み込ませるか、<select>タグの書き方に問題がないか確認することが挙げられます。
- ベストアンサー
scriptによる読み込みのselect表示
<script language="javascript" type="text/javascript" src=""></script> で外部ファイルからHTMLを読み込ませ表示させたいのですがなぜかselectが上手く表示されません。 上手く説明できませんが <script language="javascript" type="text/javascript" src="http://www.○○.com/××.php"></script> を貼り付けた部分に http://www.○○.com/に用意した××.phpから <form action="" method="post"> <input type="radio" name="test1" value="1" />r1 <input type="radio" name="test1" value="2" />r2 <input type="checxbox" name="test2" value="1" />c1 <input type="ceckbox" name="test2" value="2" />c2 <select name="test3"> <option value="1">s1</option> <option value="2">s2</option> </select> </form> このようなHTMLを吐き出して表示させたいのですが、redioやchekboxは問題ないのにselectが上手く表示されません。 全くプルダウンが出来ずoption部分を見る事が出来ない状態です。 上記のような方法で表示させる事は無理なのでしょうか？ それとも何か対応策はあるのでしょうか？ どなたかお教え願えませんでしょうか。
- tetsu222
- お礼率47% (10/21)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
回答番号：No.1です。先のやつはIEではだめですね。 IEではSELECT OPTIONのDOMの取り扱いが違うみたいです。 下のようにしなければならないみたいです。（面倒くさい） 略 var objSelect = document.createElement('select'); var objOption=[]; objOption[0] = document.createElement('option'); objOption[0].value ="1"; objOption[0].text ="s1"; try{ objSelect.add( objOption[0], null ); // FireFox }catch(e){ objSelect.add( objOption[0]); // IE } objOption[1] = document.createElement('option'); objOption[1].value ="2"; objOption[1].text ="s2"; try{ objSelect.add( objOption[1], null ); // FireFox }catch(e){ objSelect.add( objOption[1]); // IE } objForm.appendChild(objSelect); 略
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
回答番号：No.1です。 innerHTMLでは、SELECTのOPTIONが設定できませんでした。ごめんなさい 以下のようにすればだいじょうぶでした。 php側 xx.php <?php header("Content-type: application/x-javascript\n\n"); print <<<EOD /* java script */ window.onload = function () { var element = document.createElement('div'); element.id = "outform"; element.innerHTML = "<form action=\"\" method=\"post\"><br />"; element.innerHTML += "<input type=\"radio\" name=\"test1\" value=\"1\" />r1<br />"; element.innerHTML += "<input type=\"radio\" name=\"test1\" value=\"2\" />r2<br />"; element.innerHTML += "<input type=\"checxbox\" name=\"test2\" value=\"1\" />c1<br />"; element.innerHTML += "<input type=\"ceckbox\" name=\"test2\" value=\"2\" />c2<br />"; element.innerHTML += "</form>"; var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(element); var objForm = document.getElementById("outform"); var objSelect = document.createElement('select'); var objOption=[]; objOption[0] = document.createElement('option'); objOption[0].value ="1"; objOption[0].text ="s1"; objSelect.appendChild(objOption[0]); objOption[1] = document.createElement('option'); objOption[1].value ="2"; objOption[1].text ="s2"; objSelect.appendChild(objOption[1]); objForm.appendChild(objSelect); } EOD; ?> 本体側 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>domtest</title> <script type="text/javascript" charset="utf-8" src="http://www.○○.com/XX.php"> </head> <body> </body> </html>
お礼
yyr446さん ありがとうございます。 No1～3を参考にさせていただきＴＲＹしてみます。
- yyr446
- ベストアンサー率65% (870/1330)
javascriptをphpで出力している理由がよくわかりませんが、(フォームの内容を動的に変えたいのでしょうか？)、phpで下のようなjavascriptを生成すればどうでしょうか、innerHTMLを使った簡易方法ですが．．． <script type="text/javascript" charset="utf-8"> <!-- /* java script */ window.onload = function () { var element = document.createElement('div'); element.id = "outform"; element.innerHTML = "<form action=\"\" method=\"post\"><br />"; element.innerHTML += "<input type=\"radio\" name=\"test1\" value=\"1\" />r1<br />"; element.innerHTML += "<input type=\"radio\" name=\"test1\" value=\"2\" />r2<br />"; element.innerHTML += "<input type=\"checxbox\" name=\"test2\" value=\"1\" />c1<br />"; element.innerHTML += "<input type=\"ceckbox\" name=\"test2\" value=\"2\" />c2<br />"; element.innerHTML += "<select name=\"test3\"><option value=\"1\">s1<br />"; element.innerHTML += "</option><option value=\"2\">s2<br />"; element.innerHTML += "</option></select></form>"; var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(element); } // --> </script>
関連するQ&A
- 読み込む外部スクリプトをセレクトボックスを使って選べないでしょうか？
お世話になります。 フォーム内に配置した、１から５までの数字を選べるセレクトボックスを使って、そのフォーム内に読み込む.jsファイルを選択することは出来ないでしょうか？ 外部ファイルには、UsualSet.js、EmergencySet.js、PauseSet.jsなどがあって、そのスクリプトファイルの中身は document.write("<input name=\"youbi\" type=\"hidden\" value=\"土曜\"><input name=\"codenumber\" type=\"hidden\" value=\"732\"><input name=\"busho\" type=\"hidden\" value=\"経理\">"); とかいった感じになっています。 つまり、セレクトボックスで何番を選ぶかによって、CGIに渡す値を$youbiと$codenumberと$bushoとの３つ全ていっぺんに変更出来るようにしたい訳です。 しかし、そのセレクトボックスにどういう仕掛けをしたら良いかわからなくて困っています。 まさか、 <FORM ACTION="pro.cgi" METHOD="POST"> <select name="kazu"> <option value="<script language="javascript" src="UsualSet.js>" selected>1</option> <option value="<script language="javascript" src="EmergencySet.js>" >2</option> <option value="<script language="javascript" src="PauseSet.js>" >3</option> <option value="<script language="javascript" src="MorningSet.js>" >4</option> <option value="<script language="javascript" src="FulleSet.js>" >5</option> </select> <input type="hidden" name="kaijou" value="22890"> <input type="hidden" name="boxnumber" value="62"> <input type="submit" name="Submit" value="送信"> </FORM> なんてわけに行かないですもんね。 どうしたらいいかおわかりの方がいらっしゃいましたら、どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){ if(option value="＋"){ document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトで選んだ数の計算方法
初心者なので基本的な質問ですが、よろしくお願いします。 セレクトで選んだ数値が2つあり、その積を表示したいのです。 どうしたらよいでしょうか。 </script> <script langauage="JavaScript"> <!-- function calcNum(){ var num1 = parseInt(document.getElementById('s1').value); var num2 = parseInt(document.getElementById('s2').value); var kei = num1 * num2; } //--> </script> </head> <body> <form name="form1"> <select size="1" name="select2" id="s2" onchange="selectChange()"> <option value="5"> ５</option> <option value="9"> ９</option> </select> </form> <form name="form1"> <select size="1" name="select1" id="s1" onchange="selectChange()"> <option value="2"> ２</option> <option value="12">１２</option> </select> </form> <input type="text" name="kei" size="10"> <input type="button" value="計算" onmousedown="calcNum()"> スクリプトのところだけの抜粋でわかりにくいかもしれないのですが、 どのようにしたら良いか、教えてください。 根本的に違っているようでしたら、どうやればよいのか教えてください。 よろしくお願いします
- ベストアンサー
- JavaScript
- javascriptについての質問です。複数の一つのselect等で選
javascriptについての質問です。複数の一つのselect等で選択した文字の値をinputに表示したいのですが <FORM> <SELECT NAME="select1"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" a">a</OPTION> <OPTION VALUE=" b">b</OPTION> <OPTION VALUE=" c"c</OPTION> </SELECT> <SELECT NAME="select2"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" 壱">壱</OPTION> <OPTION VALUE=" 弐">弐</OPTION> <OPTION VALUE=" 参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> とこの様なフォームがあるとしまして 各SELECT で選択した各文字を <input TYPE="text" NAME="text1" VALUE="">に追加したいんです。 SELECT一つなら出来たのですが 複数になると追加をどうするのかやり方がわからなくて・・・ 一つのセレクトは一つしか選択できなくなればなお良いのですが・・・ どなたがご教授願えないでしょうか?
- ベストアンサー
- JavaScript
- 他のFormの入力内容により、Selectの状態を変化させたい
Formの状態を他のFormの入力によって変化させたいのですが。 イメージ的には <Script language="Javasript"> function data1() { document.forms[1].elements[0].value=document.test.i.value; } function data2() { document.forms[2].elements[0].options[document.test.i.value].selected=ture; } </script> 入力<br> <form name="test"> <input type="text" name="i" onKeyDown="javascript:if(event.keyCode==9){ data1();data2(); }" > </form><br><br> テキスト<br> <form> <input type="text"> </form><br><br> セレクト<br> <form> <select> <option>0 <option>1 <option>2 <option>3 </select> </form><br><br> こんな感じです。 これで、タブキーを押せば、「入力」Formに入力された内容が、関数data1()によって「テキスト」Formにも表示されます。 これと同じように、「入力」Formに入力された内容で、「セレクト」Formを変化させたいと思いますが、data2()エラーになり上手く動作しません。 「入力」Formに1を入力すれば、「セレクト」Formの1が選択された状態になる… と言った事をしたいのですが、どうすればいいでしょうか？
- ベストアンサー
- JavaScript
- 複数のvalue値を返すには
Ａを選択した時10、Ｂを選択した時100、Ｃなら1000と <input type="text" name="TEXT" value="">に表示されるように以下のようなjavascriptを記述しましたが、 Ａの時10と20を、Ｂの時100と200、Ｃの時1000と2000が もうひとつの<input type="text" name="TEXT2" value="">に表示できるようにするにはどうしたらよいのでしょうか。 記述方法を教えていただければ一番いいのですが、サンプルがあるページでもいいので、教えてください。 <script type="text/javascript"> <!-- function kai(){ document.FORM.TEXT.value = document.FORM.num.value; } //--> </script> </head> <body> <form name="FORM"> <input type="text" name="TEXT" value=""> <select name="num" onChange="kai()"> <option value="10">Ａ</option> <option value="100">Ｂ</option> <option value="1000">Ｃ</option> </select> </form>
- ベストアンサー
- JavaScript
- javascriptについての質問です。複数のselect等で選択した
javascriptについての質問です。複数のselect等で選択した文字の値をinputに表示したいのですが2 こちらで <script> function changeFunc(f){ f.elements["text1"].value=f.elements["select1"].value+f.elements["select2"].value; } </script> <FORM> <SELECT NAME="select1" onchange="changeFunc(this.form)"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" a">a</OPTION> <OPTION VALUE=" b">b</OPTION> <OPTION VALUE=" c">c</OPTION> </SELECT> <SELECT NAME="select2" onchange="changeFunc(this.form)"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" 壱">壱</OPTION> <OPTION VALUE=" 弐">弐</OPTION> <OPTION VALUE=" 参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> というプログラムを教えていただいたのですが 最新のブラウザーではどれもが動作するのですが IE5.IE6.IE7で動かなくて困っております。 IE5は仕方ないカナとも思ってしまったりするのですが IE6 IE7では動いて欲しくて困っています。 どなたか助けていただけないでしょうか
- ベストアンサー
- JavaScript
- セレクトボックスを無効に出来なくて困っています
このサイトで拝見したソースを参考に、ラジオボタンで選択した項目以外のテキストボックスなどが無効になる仕組みの、以下のようなフォームを作りました。 <form method="POST" name="form01"> <script language="javascript" type="text/javascript"> <!-- function swDis() { fObj = document.form01; fObj.sentaku01.disabled = (fObj.namae[0].checked) ? false : true ; fObj.sentaku02.disabled = (fObj.namae[1].checked) ? false : true ; fObj.sentaku03.disabled = (fObj.namae[2].checked) ? false : true ; } //--> </script> <p> <input type=radio name="namae" value="AAA" onclick="swDis()" checked /> sentaku01 <select name="sentaku01" id="sentaku01"> <option>選択肢１</option> <option>選択肢２</option> <option>選択肢３</option> </select> <br /> <input type=radio name="namae" value="BBB" onclick="swDis()" /> sentaku01 <input type=text name="sentaku02" disabled /> <br /> <input type=radio name="namae" value="CCC" onclick="swDis()" /> sentaku01 <input type=text name="sentaku03" disabled /> <br /> <input type=radio name="namae" value="sentaku04" onclick="swDis()" /> sentaku04<br /> <input name="" type="submit" value="送信する" /> </p> </form> しかし、この方法ですと、最初にフォームが表示された段階ではセレクトボックスが生きてしまい、他のいずれかのラジオボタンをクリックしないとセレクトボックスがグレーアウトしてくれません。 フォームが表示された時点ですぐにセレクトボックスをグレーアウトさせる方法はないでしょうか？ 対策をご存じの方がいらっしゃいましたらどうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- 入力した文字をalertで表示するスクリプトを作っています。
入力した文字をalertで表示するスクリプトを作っています。 以下、IEとOperaでは動作しますが、FirefoxとGoogle Chromeでは動作しません。 書き方が悪いのでしょうか？ <html> <head> <script language=JavaScript> <!-- function test(){ alert(input1.value); } // --> </SCRIPT> </HEAD> <BODY> <input type="text" name="input1"> <input type="button" value="テスト" onClick="test()"> </html>
- ベストアンサー
- JavaScript
- selectのnameが配列の場合
説明がわかりにくいかもしれませんがよろしくお願いいたします。 セレクトボックスが選択されると、テキストフィールドが変わるというJavaScriptを作成しています。 nameに配列を使った場合、elementsを使用すればいいと言うことまでは分かり１つだけの場合は成功しました。 しかし、同じname(配列)のセレクトボックスとテキストフィールドが複数ある場合は成功しません。 PHPでデータベースに格納する際に、どうしてもセレクトボックスとテキストフィールドは配列にして置かないといけないのですが、この場合どうすれば、成功するでしょうか？ 現在以下のようにソースを書いて失敗しています。 ご教授の程よろしくお願いいたします。 ↓↓JavaScript部分 <script> function selectChange(){ var no = document.test1.elements['member[]'].selectedIndex; if(no==1){ document.test1.elements['point[]'].value =0; } else{ document.test1.elements['point[]'].value =""; } } </script> ↓↓HTML部分 <form name='test1'> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> <br> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> </form> //bbbの場合だけ、テキストフィールドのデフォルト値を0にしたい
- ベストアンサー
- JavaScript
お礼
いろいろありがとうございました。 何とか試行錯誤して上手く行きそうです。