getElementsByNameについて

2023/10/23 01:37

このQ&Aのポイント

getElementsByNameを使用してプルダウンの選択値を取得する方法がわかりません。
getElementByIdではなくgetElementsByNameを使用した場合、動作しません。
配列でデータが来るという話を聞いたので、どこかにインデクサを指定すればいけるかもしれません。

ベストアンサー

getElementsByNameについて

2012/02/09 00:00

JSでプルダウンの選択値をとりたくて、以下のように書きました。 var select = document.getElementById('test'); var options = document.getElementById('test').options; var value = options.item(select.selectedindex).value; 都合により、getElementByIdではなくてgetElementsByNameで同様のことをしたいのですが、単純にgetElementsByNameに置換しただけでは動きませんでした。（Nameは一意になるよう作っています）確か配列でデータが来るとかいう話を聞いた覚えがあるので、どこかにインデクサを指定すればいけるでしょうか？申し訳ないですが、ご教授ください。

ginfix
お礼率34% (330/962)

JavaScript
回答数4
ありがとう数3

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

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

ベストアンサー

nda23
ベストアンサー率54% (777/1415)

2012/02/09 10:23 回答No.3

日本語は単数/複数の使い分けがいい加減なのですが、英語は厳密で、動詞などが活用変化しますよね。英語起源のプログラム言語も同様に単数/複数の使い分けが重要です。 getElementById：単数形なので、単一オブジェクトが返ります。 getElementsByName：複数形なので、オブジェクトの集合つまり、コレクションが返ります。特定するにはインデックスやIDで一意にする必要があります。ついでに言うと、valueは単数ですが、 optionsは複数なので、selectedIndexでインデックスを指定しないと、選択した値が取れません。同じようなものにformとforms、 windowとwindowsなどがあります。単複によるオブジェクト/コレクションの違いはJavaScriptだけでなく、他の多くの言語でも見られることです。

その他の回答 (3)

think49
ベストアンサー率59% (285/482)

2012/02/10 17:57 回答No.4

HTMLDocument#getElementsByName は DOM L2 HTML 規定および HTML Standard (HTML5) 規定では name 属性値を元に NodeList を返す仕様です。 http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/HTML/HTMLDocument.html#HTMLDocument-getElementsByName http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#documents-in-the-dom 対して、IE (IE9 では修正されているかもしれません) は id, name 属性値を元に HTMLElementCollection を返す仕様になっています。 http://msdn.microsoft.com/en-us/library/windows/apps/hh465829.aspx NodeList と HTMLElementCollection の違いは小さなものですが、id 属性値を含んで返す IE の仕様には注意する必要があります。 > Nameは一意になるよう作っています name の中で一意にするのではなく、id, name の中で一意にしなければなりません。 id と name で重複した名前を使用しないほうがいいでしょう。 http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/HTML/HTMLFormElement.html#HTMLFormElement-elements http://d.hatena.ne.jp/sandai/20100823/p1#002 以上のマークアップ規約を守れば、次のように書けます。 var select = document.getElementsByName('test')[0], // id="test" が存在せず、name="test" が一つだけ存在するなら、NodeList の初めの要素が目的の要素となる options = select.options, value = options.item(select.selectedindex).value; 管理が面倒になりがちなので、私としては getElementsByName ではなく、HTMLFormElement#elements による参照をお勧めします。 document.getElementsByTagName('form')[0].elements.namedItem('test'); http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/HTML/HTMLFormElement.html#HTMLFormElement-elements

fujillin
ベストアンサー率61% (1594/2576)

2012/02/09 08:55 回答No.2

nameの対象が必ず存在して、一意かつselectであることがわかっているのなら　var value = document.getElementsByName('test')[0].value; とか。

kosukejlampnet
ベストアンサー率44% (126/282)

2012/02/09 01:40 回答No.1

たとえば、 var options = document.getElementsByName('test').options; の場合、 option[0] になります

関連するQ&A

セレクトボックス自動表示
以前http://okwave.jp/qa/q6872183.htmlにてご質問させていただきました。合計の数値までだすことはできたのですが、selectboxを数値の分だけだすのができなくて困っています。 <script type="text/javascript"> function calculate(){ var test1 = parseInt(document.getElementById('test1').options[document.getElementById('test1').selectedIndex].value); var test2 = parseInt(document.getElementById('test2').options[document.getElementById('test2').selectedIndex].value); var test3 = parseInt(document.getElementById('test3').options[document.getElementById('test3').selectedIndex].value); var test4 = parseInt(document.getElementById('test4').options[document.getElementById('test4').selectedIndex].value); if(isNaN(test1)){test1 = 0;} if(isNaN(test2)){test2 = 0;} if(isNaN(test3)){test3 = 0;} if(isNaN(test4)){test4 = 0;} document.getElementById('total').innerHTML = test1 + test2 + test3 + test4; } </script> <select name="test1" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test2" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test3" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test4" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <select name="test5" onChange="calculate()"> <opiton value="1">1</opiton> <opiton value="2">2</opiton> <opiton value="3">3</opiton> <opiton value="4">4</opiton> <opiton value="5">5</opiton> </select> <p id="total">0</p> がソースになります。お分かりの方がいらっしゃいましたらご教示お願いします。
- ベストアンサー
- JavaScript
なぜｇetElementsByNameとgetElementsByIdでセレクトボックスを参照できないでしょうか
初心者ですが、ｇetElementsByNameとgetElementsByIdの使い方はよくわかりません。知っている方がいらっしゃいましたらぜひご教授ください。下記のソースなんですが、なぜ var arrayObj1 = document.getElementsByName("bsListName"); var arrayObj2 = document.getElementsById("bs"); というふうにセレクトボックス要素を参照することができなくて、javasciptエラーが出てしまう。もし var arrayObj1 = document.getElementsByName("bsListName"); var arrayObj2 = document.getElementsById("bs"); この2行のソースを削除したら、javasciptエラーがなくなります。つまり、なぜかｇetElementsByNameとgetElementsByIdでセレクトボックスを参照できないでしょうか <html> <head> <script type="text/javascript"> function refleshNewListName(){ var arrayObj = document.myform.bsListName ; var arrayObj1 = document.getElementsByName("bsListName"); var arrayObj2 = document.getElementsById("bs"); alert(arrayObj.selectedIndex); } </script> </head> <body> 1122 <form name="myform"> <div id="bs"> <select name="bsListName" onChange="refleshNewListName()" > <option value="-1" selected>--新規リスト--</option> <option value="10720" class="my_list">Myリスト</option> <option value="10721" class="recent_sales_list">常用リスト</option> </select> </div> </form> </body> </html>
- 締切済み
- JavaScript
以下のコードがＩＥ８では実行されない
現在、セレクトボックスで選択した値をテキストエリアに反映させる javascriptを以下のように作成したのですが、 Firefoxでは問題なく実行されるのですが、ＩＥ８だと全く反応がありません。この機能をＩＥ８でも実行できるようにするためには、どこをどのように修正すればよいのかわかりません。（色々調べてはいるのですが、早急に実装しなければならない事情がありまして）どなたか、ご教授いただけないでしょうか？ ■ＨＴＭＬソース <html> <head> <title>テスト</title> <script type="text/javascript" src="./insert.js"></script> </head> <body> 項目： <select id="meet1" onchange="insert_meet1()"> <option></option> <option>テスト１</option> <option>テスト２</option> <option>テスト３</option> </select> <br /> 反映されるエリア： <textarea id="result" cols="50" rows="10"></textarea> </body> </html> ■insert.js function insert_meet1(){ var mojiretsu = document.getElementById('meet1').value; var area = document.getElementById('result'); var bun = document.getElementById('result').value; var nagasa = bun.length; var basho = area.selectionStart; var mae = bun.substr(0, basho); var ushiro = bun.substr(basho, nagasa); document.getElementById('result').value = mae + mojiretsu + ushiro; }
- ベストアンサー
- JavaScript
セレクトメニューに応じたdivタグの内容
javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </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
プルダウンを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
プルダウンから別ウィンドウを開く方法
プルダウンから別ウィンドウを開く方法 jsで管理しているプルダウンメニューの一部を別ウィンドウで表示させたいのです。下記の000.htmlをblankで表示させたい場合どのような記述になるのでしょうか？どうぞよろしくお願いします。 function launch_report(obj) { var location = obj.options[obj.selectedIndex].value; if (location) { top.document.location.href = location; } } function shouhin() { document.open(); document.write("<select name=\"hoge\" size=\"1\" class=\"form\" onChange=\"launch_report\(this\)\">"); document.write("<option value=\"000.html\">メニュー"); document.write("</select>"); document.close(); }
- 締切済み
- JavaScript
複数のcookieでの保存
javescriptはかなりの初心者です。サイトや本のサンプルで勉強してテキストボックス、チェックボタン、ラジオボタンに記入した内容を保存するcookieの作成を試みたのですが上手くいきません;; どなたかご教授よろしくお願いします。やりたい事はフォームに記入・チェックした内容をセレクトボタン「保存1」「保存2」・・・と選択したら、それぞれにセーブ・ロードを複数記憶させたいと思っています。 5つほどの記憶を予定しています。実際に保存させるフォーム数は数十個以上あり、テキストボックスの記入内容は数字だけの予定です。また、それらは別途の計算するスクリプトでの入力内容として使っています。(競合とかの問題もあるのでしょうか?) なお、下記の状態でもラジオボタンだけは保存も出来ませんでした; 作成したものを載せましたが、なにぶん初心者の作成したscriptなだけに役に立たない構文で、説明不足もあるかもしれませんがよろしくお願いします。 <HTML> <HEAD> <script language="JavaScript">  </script> </HEAD> <BODY> <form id="myForm">テキスト1<BR> <INPUT size="20" type="text" maxlength="10" value="0" name="a"><BR> <BR> セレクト1<BR> <SELECT size="2" name="b"> <OPTION value="0" selected>0</OPTION> <OPTION value="1">1</OPTION> <OPTION value="2">2</OPTION> <OPTION value="3">3</OPTION> <OPTION value="4">4</OPTION> <OPTION value="5">5</OPTION> </SELECT><BR> <BR> セレクト2<BR> <SELECT name="c"> <OPTION value="0" selected>0</OPTION> <OPTION value="1">1</OPTION> <OPTION value="2">2</OPTION> <OPTION value="3">3</OPTION> <OPTION value="4">4</OPTION> <OPTION value="5">5</OPTION> </SELECT><BR> <BR> チェック1<BR> <INPUT type="checkbox" name="d" value="0"><BR> <BR> ラジオ1<BR> <INPUT type="radio" name="e" value="0"><BR> <INPUT type="radio" name="e" value="1"><BR> <BR> <BR> <SELECT name="selectsave"> <OPTION selected>保存1</OPTION> <OPTION>保存2</OPTION> <OPTION>保存3</OPTION> <OPTION>保存4</OPTION> <OPTION>保存5</OPTION> </SELECT><BR> <BR> <INPUT type="button" value="セーブ" name="save" onclick="set_cookie()"> <P><INPUT type="button" value="ロード" name="lord" onclick="get_cookie()"><BR> </P> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
JavaScriptでの表の行の表示・非表示の切り替え
現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript">  </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト１</option> <option value="test2">テスト２</option> <option value="test3">テスト３</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p> </p> </td> <td width="217"> <p> </p> </td> </tr> </table> <div id="test1" style="display:none;"> （本来はここに2行追加したい） </div> </body> </html>
- ベストアンサー
- JavaScript
連動するセレクトボックスの内容を増やしたい
お世話になります。現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。 http://enjoyjob.blog116.fc2.com/blog-entry-221.html サンプルでは親と子のセレクトボックスが３つなのですが、７つの親と子のセレクトボックスを作りたいと思っています。 JavaScriptのどの部分を変えればいいのかどうかご教授お願いいたします。 <script type="text/javascript"> var parentArray = new Array('東京都','神奈川県','静岡県'); ////親セレクトボックスを配列から書き出し function autoOptions(){ var parent=parentArray.length; var selectNumber = document.getElementsByTagName("select").length; for(var j=0;j<=selectNumber/2-1;j++){ idName='parent_'+j; document.getElementById(idName).length=parent+1; for(var i=0;i<parent;i++){ document.getElementById(idName).options[i+1].text= parentArray[i]; } } } ////連動セレクトボックス function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; if(document.getElementById(idParent).selectedIndex==0){ document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; } else { document.getElementById(idChild).selectedIndex=0; document.getElementById(idChild).length=1; var child = childArray[document.getElementById(idParent).selectedIndex-1]; document.getElementById(idChild).length=child.length+1; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i+1].text= child[i]; } } } ////子セレクトボックスの配列 var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); </script>
- ベストアンサー
- JavaScript