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;
~
No.2ベストアンサー
- 回答日時:
こんにちは。
配列というものを利用すればfor等の繰り返しを利用してスマートに取得することが出来ます。
<html>
<head>
<script type="text/javascript">
function test ( form ) {
// 選択されている値を保持する配列
var values = new Array();
// c1~c100までを配列に保存
for ( var i = 1; i <= 100; i ++ ) {
var elm = form.elements['c'+i];
// 配列は0番目から始まるのでi-1
values[i-1] = elm.options[elm.selectedIndex].value;
}
// 結果表示テスト(valuesの中身を
// 全てテキストエリアに出力してみる)
form.result1.value = "";
for ( var i = 1; i <= 100; i ++ ) {
form.result1.value += values[i-1];
// 10要素で改行
if ( i % 10 == 0 ) form.result1.value += "\n";
}
// 要素名をキーにして配列にセットすることも可能
var values2 = new Array();
for ( var i = 1; i <= 100; i ++ ) {
var elm = form.elements['c'+i];
values2['c'+i] = elm.options[elm.selectedIndex].value;
}
var cnt = 1;
form.result2.value = "";
for ( key in values2 ) {
form.result2.value += values2[key];
// 10要素で改行
if ( cnt++ % 10 == 0 ) form.result2.value += "\n";
}
}
</script>
</head>
<body>
<form name="formtest">
<!-- ここに100個のselectがあるとする -->
<!-- ここに100個のselectがあるとする -->
<!-- ここに100個のselectがあるとする -->
<input type="button" value="はい" onclick="test(this.form)">
<br>
<textarea name="result1" cols="20" rows="10"></textarea>
<br>
<textarea name="result2" cols="20" rows="10"></textarea>
</form>
</body>
</html>
var elm = form.elements['c'+i];のところの['c'+i]が正しくないようで「elm is underfind」というエラーが出てしまいます
下記のようにすると取得できるのですが、ブラウザが読み込みをやめない状態になってしまいます。select要素のnameはc1から始まりc100と何も換えていません。
<script>
function myForm (form) {
var values = new Array();
for ( var i=0; i<100; i++ ) {
var elm = form.elements[i];
values[i] = elm.options[elm.selectedIndex].value;
document.write(values[i] + "<br />");
}
}
</script>
No.4
- 回答日時:
したのものをじっこうすると IE でもうごく
//https://developer.mozilla.org/ja/JavaScript/Refe …
if (!Array.prototype.filter)
{
Array.prototype.filter = function(fun /*, thisp*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
{
var val = this[i]; // fun が this を 変化させた場合に備えて
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}
//https://developer.mozilla.org/ja/JavaScript/Refe …
if (!Array.prototype.map)
{
Array.prototype.map = function(fun /*, thisp*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
var res = new Array(len);
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
res[i] = fun.call(thisp, this[i], i, this);
}
return res;
};
}
--
> functionの中に必ずreturnがあるのですが、必ず入れないといけないのでしょうか。
JS1.8 なら、しょうりゃくできるよ(ためしてないけど)
const getSelectValues =
(function (form)
Array.prototype
.filter.call (form.elements,
(function (e) ('SELECT' === e.tagName) && ('select-one' === e.type)))
.map (function (e) e.value || ''));
No.3
- 回答日時:
select ようそが 100こも あるじてんで、しょうきのさたとおもえない(笑)
select ようそには、optgroup もあれば、multiple もあるよ。
div ようそのなかが、きそくただしくならんでいるのであれば、それはりすとたぐのでばんだとおもう。
function isSelect (e) {
return ('SELECT' === e.tagName) && ('select-one' === e.type);
}
function getValue (e) {
return e.value || '';
}
function getSelectValues (form) {
return Array.prototype.filter.call (form.elements, isSelect).map (getValue);
}
有難うございます。
return Array.prototype.filter.call (form.elements, isSelect).map (getValue);
こんな感じにもできるんですね。
ただ、Array.prototype.filter.callは良いのですが、IEに対応していないというのが残念です。
functionの中に必ずreturnがあるのですが、必ず入れないといけないのでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- Photoshop(フォトショップ) Photoshop ElementsだとiPhoneで撮影した写真を加工して家にあるプリンターで印画 1 2022/10/30 12:17
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
value内に変数を入れたい
-
大量のselect要素のvalueを短い...
-
プルダウン選択時、既に入力済...
-
ラジオボタンを押して計算結果...
-
VB.NET DateTimeの型について
-
引数に数値、文字列の混在
-
%の計算の仕方
-
eval()を使わずに数値を取得し...
-
checkboxとselectメニューの連...
-
ホームページ上での計算につい...
-
hiddenのvalueの値を変えたい
-
JAVASCRIPTで、ボタンを押した...
-
ループで連続したフォームの値...
-
JavaScriptによる自動計算フォ...
-
プルダウン 項目が多いので先頭...
-
SELECTタグで変更禁止にする方法
-
画面表示とともに、テーブルの...
-
[javascript]</TDと</TR以外で...
-
特定<table>内の<td>の色を変える
-
ラジオボタンによるフォームの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
value内に変数を入れたい
-
hiddenのvalueの値を変えたい
-
3桁区切りのカンマをつけたい...
-
VB.NET DateTimeの型について
-
複数のsubmitボタンで押された...
-
テキストボックスに入力された...
-
フォーム内容を上から順番にJav...
-
VBAをJavaScriptに変換したいです
-
大量のselect要素のvalueを短い...
-
javascriptでhiddenに二次元配...
-
フォームで入力した値を別のフ...
-
プルダウン選択時、既に入力済...
-
ラジオボタンと連動して文字列...
-
クイズ作成:15個の問題から5個...
-
引数に数値、文字列の混在
-
クリックの度に加算していくには?
-
setIntervalの間隔を途中で変更...
-
Pythonで会員サイトの自動ログ...
-
JavaScriptによる自動計算フォ...
-
selectboxのoptionタグのvalue...
おすすめ情報