プルダウンリストの内容の取得がうまくいかなくて困っています

2023/08/08 03:28

このQ&Aのポイント

プルダウンリストの内容を取得する際に、Firebugでのデバッグに注意が必要です。
IE7では問題なく動作するが、FireFoxではうまくいかない理由があります。
getElementById()を使用して書き直すことで解決する可能性があります。

ベストアンサー

プルダウンリストの内容の取得がうまくいかなくて困っています。

2008/06/29 00:27

こんばんは。下記のようにwork_in1というid名のプルダウンリストで選択されている内容を取得しています。 work_inC1=work_in1.options[work_in1.selectedIndex].value; Firebugでデバッグ（これが正しい言い方なのかわかりませんが…）すると「グローバルスコープで ID または name 属性値により要素を参照しています。代わりに W3C 標準の document.getElementById() を使用してください。」という注意（エラーではなさそう）が出ます。実際、IE7では思った通りのことができているのですが、FireFoxこれのせいかほかの部分がうまく働かないのです。 getElementById()を使って書き直せばいいのだろうとは思うのですが、書き方がわからなくて困っています。ということで… 1.work_inC1=work_in1.options[work_in1.selectedIndex].value;のdocument.getElementById()を使った書き方 2.Firebugの注意の意味（name 属性値により要素を参照とかの意味） 3.なぜIE7ではうまくいくのに、FireFoxではうまくいかないのか以上三点について教えていただきたいのです。どれか一つでもいいのでご存知の方がいらっしゃったらご教授ください。お察しかと思いますが、当方JavaScript初心者のため、何かおかしな点や不備がありましたら遠慮なく言ってください。勉強になりますので。どうぞよろしくお願いします。

kai1192
お礼率93% (30/32)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2008/06/29 01:40 回答No.1

>1.work_inC1=work_in1.options[work_in1.selectedIndex].value;のdocument.getElementById()を使った書き方一度変数に落としてやるといいでしょう。 var obj=document.getElementById('work_in1'); work_inC1=obj.options[obj.selectedIndex].value; >2.Firebugの注意の意味（name 属性値により要素を参照とかの意味） <xxx name="hoge">で指定してるオブジェクトにアクセスする際にイキナリ「hoge.yyy=zzz」的なアクセスをしているということです。これはやってはいけない最たるもののひとつです実際のところほとんどのタグではname属性は非推奨・廃止予定ですのでこのような書き方をすること自体が問題です。 >3.なぜIE7ではうまくいくのに、FireFoxではうまくいかないのか IEが拡大解釈しているからです。ちょっと便利に見えますが、「勝手にやっている」ことなのでFirefoxでうまくいかないほうが正しい挙動です。まちがった書き方は所詮まちがったやり方なので、正しい書き方にするよう気をつけてください。

質問者

お礼 2008/06/29 13:02

ご回答ありがとうございます。お礼が遅くなりすみません。うまくいきました☆ ネット上のいろんなページを参照し作成しているので古いやり方を受け入れてしまったようです。 IEで動くからと言って完成とするのは危険ですね。勉強になりました。それぞれの質問に丁寧に答えていただき、本当にありがとうございました。

関連するQ&A

JavaScriptでプルダウンのサイズを取得
JavaScriptにてプルダウンのサイズ(<option>の数)を取得したいと思っています。 document.getElementById("pulldown").length　にて取得できると思うのですが試してみたところ無反応でした。どう書けばよろしいのでしょうか。 <html> <head> 　　　　<script type="text/JavaScript"> 　　　　　　　　　　　　　　alert(document.getElementById("pulldown").length); 　　　　</script> </head> <body> <form name="form"> <select name="pulldown" id="pulldown"> <option value="5">5</option> </select> </form> </body> </html>
- ベストアンサー
- 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
プルダウンメニュー
　こんばんは。日時をプルダウンメニューで選択するのですが、月が変わると、内容も変わるようにしたいと思っています。JavaScriptで、出来ると聞いたのですが、やり方が解りません。このように書いてみたのですが、画面には何も表示されません。助けてください。 <SCRIPT LANGUAGE = "JavaScript"> <FORM NAME="form1" METHOD="post"> if (mm = 2){ document.write("<SELECT NAME="dd1" onChange="document.form1.dd.value=dd1.options[d d1.selectedIndex].value"> <OPTION VALUE="00"> <OPTION VALUE="16">16 <OPTION VALUE="17">17 <OPTION VALUE="18">18 <OPTION VALUE="19">19 <OPTION VALUE="20">20 <OPTION VALUE="21">21 <OPTION VALUE="22">22 <OPTION VALUE="23">23 <OPTION VALUE="24">24 <OPTION VALUE="25">25 <OPTION VALUE="26">26 <OPTION VALUE="27">27 <OPTION VALUE="28">28 </SELECT>日"); } if ((mm = 4) || (mm = 6) || (mm = 9) || (mm = 11)){ document.write("<SELECT NAME="dd1" onChange="document.form1.dd.value=dd1.options[d d1.selectedIndex].value"> <OPTION VALUE="00"> <OPTION VALUE="16">16 <OPTION VALUE="17">17 <OPTION VALUE="18">18 <OPTION VALUE="19">19 <OPTION VALUE="20">20 <OPTION VALUE="21">21 <OPTION VALUE="22">22 <OPTION VALUE="23">23 <OPTION VALUE="24">24 <OPTION VALUE="25">25 <OPTION VALUE="26">26 <OPTION VALUE="27">27 <OPTION VALUE="28">28 <OPTION VALUE="29">29 <OPTION VALUE="30">30 </SELECT>日"); } else{入らないので省きます。 </FORM> </SCRIPT>
- 締切済み
- JavaScript
リスト値を変更したときに連動して他の値を変えたいのですが
おはようございます。 JavaScriptの質問です。ボタン１とテキストボックスとリストボックスがあり、ボタン1を押すとリストボックスの選択行を0にしてテキストボックスに選択した行の行数を出そうとしています。リストボックスを手動で変更した場合はリストボックスの値が表示されるのですがボタンによってリストボックスの値が変わったときにテキストの値を変えることはできないのでしょうか？以下ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>JAVATEST</TITLE> </HEAD> <BODY > <P align="center"><B>TEST<BR> </B></P> <P align="center"><BR> </P><center> <script language="javascript">  </script> <FORM name="frmForm"><INPUT type="button" ID="button1" name="btnGo" value="TEST" onClick= "ChangeListID()"> <INPUT size="20" type="text" ID="txtText" name="txtText" onChange= "ChangeTxt()"> <tr> <TD align="right"><FORM><SELECT name="List" id="List" onChange="ChangeTxt()"> <OPTION value="1">Item1</OPTION> <OPTION value="2">Item2</OPTION> <OPTION value="3">Item3</OPTION> </SELECT></FORM></TD></tr> </FORM> </center> </BODY> </HTML> どなたかおわかりになる方よろしくお願いします。
- 締切済み
- 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
プルダウンメニューからインラインフーム内を操作する
表題のようなものをjavascriptとフォームを使って用意しましたが、IE6、IE7の環境で試験しましたが問題ありませんでした。ところが、これをFirefoxで動かすと、プルダウンで選択してもインラインフレームはまったく変化しませんでした。どちらでも動作するようにしたいのですがどのように改変すればよろしいでしょうか。初心者でとんでもない間違いをしているかもしれませんが、どうかご教授ください。現在以下のような記述になっていますインラインフレーム名：inpage  <script type="text/"> function jump(){ var url=document.form1.select1.options[form1.select1.selectedIndex].value; if (url!="") document.inpage.location.href = url; } </script>   <FORM NAME="form1"> <SELECT NAME="select1" onChange="jump()"> <option value="">選択してください <option value="AAAAA.html">AAAAA <option value="BBBBB.html">BBBBB <option value="CCCCC.html">CCCCC </SELECT> </FORM> 
- 締切済み
- JavaScript
プルダウンのメニューを表示を2つ設定。
プルダウンのメニューを表示を2つ設定したいのですが、どこが間違っているのでしょうか。基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
２つのプルダウンの連動に関して
２つのプルダウンの連動に関して javascript の話になってしまうかと思われますが、教えて下さい。２つのプルダウンを連動させたいと考えていますが、単純に決められた項目を初期値として設定するようなプルダウンであれば問題なくできますが、テーブルから取得したデータをプルダウンにセットした後に制御を掛けたいと考えています。以下のようなソースを活用できないか？と考えていますが、どのような方法があるでしょうか。。。。《活用ソース》 <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=JavaScript>  </SCRIPT> </HEAD> <BODY onLoad="funcMain(false)"> <FORM NAME=formMain METHOD=POST ACTION=result.asp onSubmit="return funcSubmit()"> <SELECT NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(都道府県を選択してください) <OPTION VALUE="0">東京都 <OPTION VALUE="1">大阪府 <OPTION VALUE="2">愛知県 <OPTION VALUE="3">千葉県 </SELECT> <SELECT NAME="city"> <OPTION VALUE="" SELECTED>(市町村を選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> <INPUT TYPE=submit VALUE="登録"> </FORM> </BODY> </HTML>
- ベストアンサー
- PHP
セレクトボックスの中を一部隠したい ( 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
javascriptがIEで機能しない
ヘッダー内 <script language="JavaScript">  </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択１</option> <option>選択２</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択１を選択しても非表示のままですどこを修正してやればいいでしょうか？ぜひ御指南ください。
- ベストアンサー
- JavaScript