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
-
hiddenのvalueの値を変えたい
JavaScript
-
セレクトボックスで配列を呼び出したい。
JavaScript
-
-
4
ダブルクォーテーションのreplaceの方法
JavaScript
-
5
javaでDBから取得したデータのJSP表示
Java
-
6
複数のセレクトボックスを1つにまとめて受け渡すには
PHP
-
7
Javascript_submit()完了後に処理したい
JavaScript
-
8
【javascript】連想配列からセレクトボックスを生成する時のvalue値が設定出来ません
JavaScript
-
9
日付型のフィールドに空白を入れる方法を教えてください
その他(データベース)
-
10
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
11
<input type=hidden" >で配列(複数の要素)を渡したいとき?"
PHP
-
12
クリックされたセルの位置を取得するには?
JavaScript
-
13
JSPでのリストボックス表示
Java
-
14
フォームで同じ複数のnameで違うvalueの送信
Java
-
15
2つの列が同じ値の行を取得するSQL
Oracle
-
16
java / jsp selectedについて
Java
-
17
【C#/Java?】try-catchでcatchせずにfinallyは一般的?
その他(プログラミング・Web制作)
-
18
Selectの中身をfor文で入れる
JavaScript
-
19
Java-jspの画面入力値保持について
Java
-
20
複数のプルダウンの値をパラメータの値に各々セット
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
Selectボックスの一覧表示方法
-
select要素のvalueを配列で取得...
-
動的なセレクトボックスの生成...
-
JavascriptからSQLへ繋ぎ方が分...
-
selectを変更不可にしたい
-
JavaScriptで<select>の<option...
-
VBScriptでHTMLのセレクトボッ...
-
console.logがどうしても2つ機...
-
hiddenに値を設定する方法
-
javascriptでセレクトメニュー...
-
連想配列を使ってコンボボック...
-
javascriptでセレクトボックス...
-
selectが変更されたらnameを指...
-
まったく同じ<select>フォーム...
-
セレクトボックスで選択した内...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
データベースからのarray を j...
-
【JavaScript】プルダウンで数...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
全てのselect要素をデフォルト...
-
【JS】selectでchangeした時の...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
複数のプルダウンを1つにまとめ...
-
コードレビューをお願いします。
-
JavaScriptで<select>の<option...
-
<input>の選択肢をプルダウンメ...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
VBScriptでHTMLのセレクトボッ...
-
ラジオボタンとプルダウンを連...
-
javascriptで合計金額を算出し...
-
中百舌鳥駅と深井駅を入れ替え...
-
同じ名前のセレクトがある場合...
-
セレクトボックスで配列を呼び...
-
今日の日付を自動的にセレクト...
-
プルダウンの値によって活性・...
-
サイト内の物件を複数の検索条...
おすすめ情報