![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
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と何も換えていません。
何が間違っているのでしょうか。
No.2ベストアンサー
- 回答日時:
具体的にはこんなかんじ
<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>
この回答への補足
すみません、訂正です。
forの中に移動してalert(values[i]);とdocument.write(values[i]);でした。
最後のalert(values);ですが、alert(values[i]);でも大丈夫ですが、
document.write(values[i]);にするとその症状がでてしまうようです。
不思議ですね。有難うございました。
No.3
- 回答日時:
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
No.1
- 回答日時:
いくつか問題があります。
(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が見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
セレクトメニューで2つの項目や値を渡す方法はありますか?
HTML・CSS
-
セレクトボックスで配列を呼び出したい。
JavaScript
-
リクエストに応じたselectedの初期値設定方法
Java
-
-
4
JSPでのリストボックス表示
Java
-
5
【javascript】連想配列からセレクトボックスを生成する時のvalue値が設定出来ません
JavaScript
-
6
プルダウンメニューを別ファイルで管理するには?
JavaScript
-
7
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
8
ダブルクォーテーションのreplaceの方法
JavaScript
-
9
クリックされたセルの位置を取得するには?
JavaScript
-
10
java / jsp selectedについて
Java
-
11
2つの列が同じ値の行を取得するSQL
Oracle
-
12
javaでDBから取得したデータのJSP表示
Java
-
13
Javascriptでのbuttonのname属性、もしくはid属性を取得
JavaScript
-
14
複数のプルダウンの値をパラメータの値に各々セット
JavaScript
-
15
Java-jspの画面入力値保持について
Java
-
16
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
17
Javascript_submit()完了後に処理したい
JavaScript
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
Selectボックスの一覧表示方法
-
【javascript】連想配列からセ...
-
セレクトボックスで配列を呼び...
-
selectのすべての値を送信する方法
-
VBScriptでHTMLのセレクトボッ...
-
<input>の選択肢をプルダウンメ...
-
selectボックスの選択結果を変...
-
option 選択による表示&非表示
-
javascriptで、変数で、ディレ...
-
複数のプルダウンを1つにまとめ...
-
javascriptでセレクトボックス...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
アンケートフォームを作成する...
-
HTML内の指定の位置にプルダウ...
-
選択肢変更型セレクトボックス...
-
javascript:データを日本語で...
-
java scriptでセレクトの入力チ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
selectを変更不可にしたい
-
javascriptでセレクトボックス...
-
全てのselect要素をデフォルト...
-
Selectボックスの一覧表示方法
-
リストボックス内の重複したも...
-
プルダウンの値によって活性・...
-
VBScriptでHTMLのセレクトボッ...
-
JavaScriptで<select>の<option...
-
セレクトボックスで配列を呼び...
-
ラジオボタンとプルダウンを連...
-
selectを使った計算
-
select要素のvalueを配列で取得...
-
<input>の選択肢をプルダウンメ...
-
javascriptでoptionタグを削除...
-
今日の日付を自動的にセレクト...
-
検索窓とプルダウンメニュー機...
-
【javascript】連想配列からセ...
-
selectボックスの選択結果を変...
-
同じ名前のセレクトがある場合...
おすすめ情報