select要素のvalueを配列で取得できないエラーの解決方法
- select要素のvalueを配列で取得できないエラーが発生する問題について解説します。
- 現在のコードでは、form.elements['c'+i]の部分が正しくないため、エラーが発生します。
- 代わりにform.elements[i]の形に書き換えることで、エラーを回避することができますが、ブラウザが読み込みをやめない状態になる可能性があります。
- ベストアンサー
select要素のvalueを配列で取得したいです
select要素のvalueを配列で取得したく、下記のサンプルを動かそうと試みました。 <html> <head></head> <body> <form> <!-- ここに<select name="c1">～<select name="c20">の20個のselectがあるとする --> </form> <input type="button" value="はい" onclick="test(this.form)"> <script type="text/javascript"> function test ( form ) { var values = new Array(); for ( var i=0; i < 20; i ++ ) { var elm = form.elements['c'+i]; values[i] = elm.options[elm.selectedIndex].value; } } </script> </body> </html> このようなサンプルを動かそうとしたのですが、 var elm = form.elements['c'+i];のところの['c'+i]が正しくないようで 「elm is underfind」というエラーが出てしまいます <script> function myForm (form) { var values = new Array(); for ( var i=0; i<20; i++ ) { var elm = form.elements[i]; values[i] = elm.options[elm.selectedIndex].value; document.write(values[i] + "<br />"); } } </script> インデックス名を'c'+iからiにすると取得できるのですが、 ブラウザが読み込みをやめない状態になってしまいます。 select要素のnameはc1から始まりc20と何も換えていません。 何が間違っているのでしょうか。
- tekkenman7
- お礼率70% (150/212)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
具体的にはこんなかんじ <script> function test(f) { var values = new Array(); for ( var i=0; i < 3; i ++ ) { var elm =f.elements['c'+(i+1)]; values[i] = elm.options[elm.selectedIndex].value; } alert(values); } </script> <form> <select name="c1"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select name="c2"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select name="c3"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="button" value="はい" onclick="test(this.form)"> </form>
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
document.writeはページの書き換えなのでこの場合は使ってはいけません。 てっとりばやくやるなら任意の場所のIDを指定してinnerHTMLを 書き変えてやることです。 <script> function test(f) { var values = new Array(); document.getElementById("hoge").innerHTML=""; for ( var i=0; i < 3; i ++ ) { var elm =f.elements['c'+(i+1)]; values[i] = elm.options[elm.selectedIndex].value; document.getElementById("hoge").innerHTML+=values[i]+" "; } } </script> <form> <select name="c1"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select name="c2"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <select name="c3"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="button" value="はい" onclick="test(this.form)"> </form> <div id="hoge"></div>
お礼
そうだったのですか。有難うございます。 参考サイト http://d.hatena.ne.jp/atomer/20110108/1294502064
- yambejp
- ベストアンサー率51% (3827/7415)
いくつか問題があります。 (1)formの外にボタンがある ＞</form> ＞<input type="button" value="はい" onclick="test(this.form)"> これは逆 <input type="button" value="はい" onclick="test(this.form)"> </form> (2)セレクトの始まる番号とiがあっていない ＞for ( var i=0; i < 20; i ++ ) { iが0から始まっているなら ＞var elm = form.elements['c'+i]; var elm = form.elements['c'+(i+1)]; にしておかないと・・・
お礼
有難うございます。ご指摘のように全て直したのですが、 解決できませんでした。動作完了後ブラウザが読み込み中になってしまいます。
関連するQ&A
- 大量のselect要素のvalueを短い文で取得
select要素が100個あり、<script>側でoption要素のvalueをそれぞれ取得する場合、 下記のようにselect要素の数だけ変数で指定する方法以外に、 もっと短くしてパフォーマンスを上げる方法はありますでしょうか。 <select name="c100"> <option value="あ">あ</option> <option value="い">い</option> <option value="う">う</option> <option value="え">え</option> <option value="お">お</option> </select> </form> <input type="button" value="はい" onclick="function(this.form)" /> ～ <script> function(a){ var b1 = a.elements["c1"].options[a.elements["c1"].selectedIndex].value; var b2 = a.elements["c2"].options[a.elements["c2"].selectedIndex].value; var b3 = a.elements["c3"].options[a.elements["c3"].selectedIndex].value; var b4 = a.elements["c4"].options[a.elements["c4"].selectedIndex].value; var b5 = a.elements["c5"].options[a.elements["c5"].selectedIndex].value; var b6 = a.elements["c6"].options[a.elements["c6"].selectedIndex].value; var b7 = a.elements["c7"].options[a.elements["c7"].selectedIndex].value; var b8 = a.elements["c8"].options[a.elements["c8"].selectedIndex].value; var b9 = a.elements["c9"].options[a.elements["c9"].selectedIndex].value; var b10 = a.elements["c10"].options[a.elements["c10"].selectedIndex].value; var b11 = a.elements["c11"].options[a.elements["c11"].selectedIndex].value; var b12 = a.elements["c12"].options[a.elements["c12"].selectedIndex].value; var b13 = a.elements["c13"].options[a.elements["c13"].selectedIndex].value; var b14 = a.elements["c14"].options[a.elements["c14"].selectedIndex].value; var b15 = a.elements["c15"].options[a.elements["c15"].selectedIndex].value; var b16 = a.elements["c16"].options[a.elements["c16"].selectedIndex].value; var b17 = a.elements["c17"].options[a.elements["c17"].selectedIndex].value; var b18 = a.elements["c18"].options[a.elements["c18"].selectedIndex].value; var b19 = a.elements["c19"].options[a.elements["c19"].selectedIndex].value; var b20 = a.elements["c20"].options[a.elements["c20"].selectedIndex].value; var b20 = a.elements["c20"].options[a.elements["c20"].selectedIndex].value; var b21 = a.elements["c21"].options[a.elements["c21"].selectedIndex].value; var b22 = a.elements["c22"].options[a.elements["c22"].selectedIndex].value; var b23 = a.elements["c23"].options[a.elements["c23"].selectedIndex].value; var b24 = a.elements["c24"].options[a.elements["c24"].selectedIndex].value; var b25 = a.elements["c25"].options[a.elements["c25"].selectedIndex].value; var b26 = a.elements["c26"].options[a.elements["c26"].selectedIndex].value; var b27 = a.elements["c27"].options[a.elements["c27"].selectedIndex].value; var b28 = a.elements["c28"].options[a.elements["c28"].selectedIndex].value; var b29 = a.elements["c29"].options[a.elements["c29"].selectedIndex].value; var b30 = a.elements["c30"].options[a.elements["c30"].selectedIndex].value; ～
- ベストアンサー
- JavaScript
- セレクトボックスのvalue値でactionを変更
いつもお世話になっております。 メニュー（セレクトボックス）のvalue値によってフォームのactionの内容を変更する方法を探しています。 【JavaScript】ラジオボタンにより、formのaction内容を変更 http://okwave.jp/qa/q6003560.html という質問を見つけ、こちらのラジオボタンをセレクトボックスに変更したのですが、動作しません。 javascriptを変更しなくてはいけないのだとは思うのですが、まったくの素人のため、検討もつかず、相談に伺いました。 <script type="text/javascript"> <!-- function check(f){ var r=f.elements["aaa"]; var flg=false; var list={"A":"aaa.php","B":"bbb.php","C":"ccc.php"}; for(var i=0;i<r.length;i++){ if(r[i].checked){ f.action=list[r[i].value]; flg=true; break; } } } //--> </script> </head> <body> <form action="" onSubmit="return check(this)"> <input name="key" type="text" value=""> <select name="aaa"> <option value="" selected>Category</option> <option value="A">AAA</option> <option value="B">BBB</option> <option value="C">CCC</option> </select> <input type="button" value="Go"> </form> </body> </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
- セレクトボックス連動
過去の質問にありましたソースを参考にセレクトボックスの 連動タイプをphpを絡めて作っています。 DBから取出した menua に入る値を初期値に設定したいのですが うまくいきません。 menua には AAA、BBB、CCCが入ります。 初期値を変えるにはどのようにすればいいのでしょうか。 また、menua以外にもmenubの初期値も変える事が出来るのでしょうか。 以下ソースになります。 <? $menua = "BBB"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- data = [ ["AAA", {key:"A01",value:101}, {key:"A02",value:102}, {key:"A03",value:103}], ["BBB", {key:"B01",value:201}, {key:"B02",value:202}, {key:"B03",value:203}], ["CCC", {key:"C01",value:301}, {key:"C02",value:302}, {key:"C03",value:303}] ]; // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.menua.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.menub.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.menub.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="menua" onchange="setSubMenu(this.selectedIndex)"> </select> <select name="menub" > </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- 全てのselect要素をデフォルトの値に戻す方法
ページを開いたときは、全てのselect部分ではデフォルトが表示されます。 選択後にブラウザを更新させずに、全てをデフォルトに戻すためには どのようにしたらよいのでしょうか。 html側でselected="selected"とする方法がありますが、 ブラウザによって対応していなかったりしたので、他に確実な方法を知りたいです。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>全てのselectをデフォルトにする</title> </head> <body> <form> <select name="s0" onclick="f(this.form)"> <option value="デフォルト" selected="selected">デフォルト</option> <option value="A">A</option> <option value="B">B</option> </select> <select name="s1" onclick="f(this.form)"> <option value="デフォルト" selected="selected">デフォルト</option> <option value="あ">あ</option> <option value="い">い</option> </select> <select name="s2" onclick="f(this.form)"> <option value="デフォルト" selected="selected">デフォルト</option> <option value="a">a</option> <option value="b">b</option> </select> </form> <script> function f(fff){ var aaa = [] var fel; var sl = document.getElementsByTagName('select').length; for(i=0; i<sl; i++){ fel = fff.elements["s"+i]; //デフォルトかそうでないかをdefaultSelectedで判断 aaa[i] = fel.options[fel.selectedIndex].defaultSelected; if( aaa[i] == false ){ //false（=デフォルトでない）場合はデフォルトに戻す aaa[i] = true; } //戻り値をかえして全てをデフォルトにする return aaa[i]; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- 連動セレクトボックスを同一ページにもう一つ追加したい
今回質問させていただきたいのは同一ページ内に連動するセレクトリストを二つ付けたいのですが上手く起動してくれません。 説明下手ですみません・・ 例えばですけど htmlには、 <html> <head> <title>あ</title> <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:"02_11"}, {key:"小樽市",value:"02_12"}, {key:"その他市町村",value:"02_099"}], ["青森", {key:"青森市",value:"03_01"}, {key:"弘前市",value:"03_02"}, {key:"その他市町村",value:"03_099"}], ["岩手県", {key:"盛岡市 ",value:"04_01"}, {key:"宮古市",value:"04_02"}, {key:"その他市町村",value:"04_099"}], ["宮城県", {key:"石巻市",value:"05_06"}, {key:"塩竈市",value:"05_07"}, {key:"その他市町村",value:"05_099"}] ]; この他にもう一つ別窓で <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM2.MENUC.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM2.MENUD.length=0; for(var i=1; i<data[no].length; i++){ document.FORM2.MENUD.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM2"> <select name="MENUC" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUD" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["プログラミング", {key:"HTML",value:"11_01"}, {key:"JavaScript",value:"11_02"}, {key:"その他市",value:"11_099"}], ["データベース", {key:"Oracle",value:"12_01"}, {key:"MySQL",value:"12_02"}, {key:"その他市",value:"12_099"}] ]; と書いたセレクトリストをもう一つ追加したいのです。 が何度やっても上手くいきません。
- ベストアンサー
- JavaScript
- javascript 要素取得
htmlでチェックボックスを作り、その値をjavascriptで取得したいと思い、 下記のようなプログラムを書きました。 セレクトボックスから複数選択できるようにしたいのですが、 表示されるのは複数選んだ際に一番初めに選択したものだけです。 例) 「あああ」と「いいい」を選ぶと「あああ」のみ表示される。 しかし、これを「あああ.いいい」としたいのです。 できれば、 「あああ いいい」 と改行できるといいです。 formの中にたくさんの項目があるため、 forのところがうまくいっていないのでしょうか？ どなたかよろしくお願いします。 javascript側 function checkbox(){ var str=""; for(i=0;i<document.form1.elements.length;i++){ if(document.form1.elements[i].checked){ if(str != "") str = str + "."; str = str + document.form1.document[i].value; } } if(str == ""){ alert("入力してください"); return false; }else{ document.form1.submit(); } } HTML側 <form action="<%=遷移先ページ%>" method="post" name="form1"> <select 複数> <input 複数> <input type="checkbox" name="document" value="・あああ"/>あああ <input type="checkbox" name="document" value="・いいい"/>いいい <input type="checkbox" name="document" value="・ううう"/>ううう <input type="submit" value="Submit" onclick="return checkbox();">
- 締切済み
- 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
- セレクトボックスとテキストボックスの連動について
セレクトボックスで質問事項を選ぶと、テキストボックスの中に選択した名称が表示される。ということをやりたく下記の様に設定しました。 <script> function hoge(obj){ var f=obj.form; var v=obj.options[obj.selectedIndex].value; var c=f.elements["comment"]; c.value+=v; obj.selectedIndex=0; } </script> <select name="質問事項1" onchange="hoge(this)"> <option value="selected">質問事項を選んでください</option> <option value=“質問1">質問1</option> <option value="質問2">質問2</option> <option value="質問3">質問3</option> </select> <textarea name="comment"></textarea> 現在発生している問題が1点あります。 セレクトボックスで質問を2回選ぶと、選んだ2つの結果がテキストボックス内に連続して表示されます。 例： 1回目 セレクトボックス内 「質問1」を選択 ↓ テキストボックス内 「質問1」が表示 2回目 セレクトボックス内 「質問2」を選択 ↓ テキストボックス内 「質問1質問2」と表示 2回目以降選んだ場合に前回の処理をクリアにして、1つのみ表示させたいと思うのですがどうやればいいのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- チェックボックスのvalueの取得方法タイプ１と２
質問１ ）） select要素の選択されたoption要素のvalueを取得する方法は タイプ１のように専用のものが用意されていますが、 チェックボックスの場合もそれ専用のものはありますか？ 質問２ ）） タイプ２ではチェックボックスの<input value=～>のvalueを取得することができましたが、 タイプ１では取得することができませんでした。正しいと思うのですが、なぜでしょうか。 質問３ ）） タイプ１とタイプ２の目的は同じですが、どちらの書き方の方が良いでしょうか。 タイプ２のほうがシンプルで短くよさそうなのですが、 多くのサイトではタイプ１を使っているところが多いようです。 ちなみに、サンプルでは１つ１つ直接書くやり方をしていますが、 実際は配列を使って複数のselect要素やチェックボックスのvalueを取得するつもりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form> <select name="aaa" onchange="cd(this.form)"> <option value="A1"></option> <option value="A2"></option> <option value="A3"></option> </select> <ul id="uli"> <li><input type="checkbox" name="bbb" id="b_1" onchange="cd(this.form)" value="B1" /><label for="b_1"></label></li> <li><input type="checkbox" name="bbb" id="b_2" onchange="cd(this.form)" value="B2" /><label for="b_2"></label></li> <li><input type="checkbox" name="bbb" id="b_3" onchange="cd(this.form)" value="B3" /><label for="b_3"></label></li> </ul> </form> <script type="text/javascript"> // タイプ１ function cd(r) { var slt = r.elements["aaa"].options[r.elements["aaa"].selectedIndex].value; alert(slt); var chk = document.getElementById('uli').children; for(i=0,len=chk.length; i<len; i++){ if(chk[i].checked == true){ alert(chk[i].nodeValue); } } } // タイプ２ function cd(r) { var slt = r.aaa.value; alert(slt); var chk = r.bbb; for(i=0,len=chk.length; i<len; i++){ if(chk[i].checked == true){ alert(chk[i].value); } } } </script> </body> </html>
- ベストアンサー
- JavaScript
お礼
最後のalert(values);ですが、alert(values[i]);でも大丈夫ですが、 document.write(values[i]);にするとその症状がでてしまうようです。 不思議ですね。有難うございました。
補足
すみません、訂正です。 forの中に移動してalert(values[i]);とdocument.write(values[i]);でした。