大量のselect要素のvalueを短い文で取得

解決済

質問者：tekkenman7
質問日時：2011/12/11 04:37
回答数：5件

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;
～

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： LancerVII
回答日時：2011/12/12 08:49

こんにちは。

配列というものを利用すれば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">



<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>

- 0
- 件

通報する

この回答へのお礼

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>

通報する

お礼日時：2011/12/16 10:27

No.5

回答者： LancerVII
回答日時：2011/12/18 20:11

こんにちは。

一応、実際に動かしてみて確認しています。

恐らくですがfor ( var i = 0; i <100; i ++ ){
で私のソースを動かしてませんか？
それですとc0～c99を取得しようとするのでエラーになります。

c1～c100であるのであれば
for ( var i = 1; i <= 100; i ++ ) {
になりますのでご注意下さい。

- 0
- 件

通報する

この回答へのお礼

細かい所まで気遣って頂き、有難うございます。

通報する

お礼日時：2011/12/30 16:05

No.4

回答者： babu_baboo
回答日時：2011/12/16 21:03

したのものをじっこうすると 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 || ''));

- 0
- 件

通報する

この回答へのお礼

そういった方法で可能なのですね。
ありがとうございます。

通報する

お礼日時：2011/12/30 16:05

No.3

回答者： babu_baboo
回答日時：2011/12/12 11:06

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);
}

- 0
- 件

通報する

この回答へのお礼

有難うございます。
return Array.prototype.filter.call (form.elements, isSelect).map (getValue);
こんな感じにもできるんですね。

ただ、Array.prototype.filter.callは良いのですが、IEに対応していないというのが残念です。

functionの中に必ずreturnがあるのですが、必ず入れないといけないのでしょうか。

通報する

お礼日時：2011/12/16 10:30