セレクトボックス自動表示

解決済

質問者：h-h13
質問日時：2011/07/27 21:46
回答数：6件

以前http://oshiete.goo.ne.jp/qa/6872183.htmlにてご質問させていただきました。

合計の数値までだすことはできたのですが、selectboxを数値の分だけだすのができなくて困っています。

<script type="text/javascript">
function calculate(){
var test1 = parseInt(document.getElementById('test1').options[document.getElementById('test1').selectedIndex].value);
var test2 = parseInt(document.getElementById('test2').options[document.getElementById('test2').selectedIndex].value);
var test3 = parseInt(document.getElementById('test3').options[document.getElementById('test3').selectedIndex].value);
var test4 = parseInt(document.getElementById('test4').options[document.getElementById('test4').selectedIndex].value);

if(isNaN(test1)){test1 = 0;}
if(isNaN(test2)){test2 = 0;}
if(isNaN(test3)){test3 = 0;}
if(isNaN(test4)){test4 = 0;}

document.getElementById('total').innerHTML = test1 + test2 + test3 + test4;
}
</script>

<select name="test1" onChange="calculate()">
<opiton value="1">1</opiton>
<opiton value="2">2</opiton>
<opiton value="3">3</opiton>
<opiton value="4">4</opiton>
<opiton value="5">5</opiton>
</select>

<select name="test2" onChange="calculate()">
<opiton value="1">1</opiton>
<opiton value="2">2</opiton>
<opiton value="3">3</opiton>
<opiton value="4">4</opiton>
<opiton value="5">5</opiton>
</select>

<select name="test3" onChange="calculate()">
<opiton value="1">1</opiton>
<opiton value="2">2</opiton>
<opiton value="3">3</opiton>
<opiton value="4">4</opiton>
<opiton value="5">5</opiton>
</select>

<select name="test4" onChange="calculate()">
<opiton value="1">1</opiton>
<opiton value="2">2</opiton>
<opiton value="3">3</opiton>
<opiton value="4">4</opiton>
<opiton value="5">5</opiton>
</select>

<select name="test5" onChange="calculate()">
<opiton value="1">1</opiton>
<opiton value="2">2</opiton>
<opiton value="3">3</opiton>
<opiton value="4">4</opiton>
<opiton value="5">5</opiton>
</select>

<p id="total">0</p>
がソースになります。

お分かりの方がいらっしゃいましたらご教示お願いします。

通報する

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

質問の本文を隠す

回答 (6件)

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

No.6ベストアンサー

回答者： babu_baboo
回答日時：2011/07/29 18:40

このながれだと、おれがぜんぶかいてしまいそうだ。

やばい！×２。
（いつもかぶせてくるひとが、ちがうほうでいそがしそうだし（笑））

あとは、がんばってね。（ますますださくなってしまった）

<!DOCTYPE html>
<title></title>

<style type="text/css">
table, td, th { border:1px red solid;}
</style>

<body>
<table id="tb">
　<tr>
　　<th>test</th>
　　<td><input type="button" value="create" onclick="hoge('mn0',1,1);hoge('mn1',1,2)"></td>
　</tr>
　<tr>
　　<th>0</th>
　　<td>ここにセレクトが</td>
　</tr>
　<tr>
　　<th>1</th>
　　<td>ここにセレクトが</td>
　</tr>
</table>

<script>
var members = ['', '碓井　健平','平岡　康裕','岩下　敬輔','ボスナー'];
var members_no = ['', 29, 3, 5, 17];
var select = createSelect (members, members_no);

function createSelect (aryText, aryValue, selectedNo) {
　var d = document;
　var s = d.createElement ('select');
　var o = s.options;
　
　if (2 > arguments.length)
　　aryValue = aryText;
　
　for (var i = 0, I = aryText.length; i < I; i++) {
　　o[o.length] = new (d.parentWindow || d.defaultView).Option (String (aryText[i]) || '', String (aryValue[i]) || '');
　}
　
　s.selectedIndex = selectedNo || 0;
　return s;
}

function hoge (name, x, y) {
　var table = document.getElementById ('tb');
　var target = table.rows[y].cells[x];
　var clone = select.cloneNode (true);

　clone.name = name;

　while (target.hasChildNodes ())
　　target.removeChild (target.firstChild);

　target.appendChild (clone);
}

</script>

- 0
- 件

通報する

No.5

回答者： babu_baboo
回答日時：2011/07/29 17:16

なんとなくわかった。

でもきっと、それでもふそく。
えんちょうせんとかないのか？
PKのけっかとか、ひつようないのか？
たいせんあいてチームのぶんもひつようじゃないのか？
にゅうりょくしたけっかを、さーばーとかにあっぷするの？
それなら、input ようそとかの、けっかをうけとる cgi がわにあわせなくていいの？

と、いろいろと。

はやいはなし、HTMLのこっかくぶぶんだけでも、かいてくれると、もうそうしやすいよ。
さいしんのぶらうざでもよさそうだね。（にやり）

- 0
- 件

通報する

No.4

回答者： babu_baboo
回答日時：2011/07/29 04:11

ごめんなさい。

しょうじきなところ、あなたのきぼうする　かんせいずがわかりません。

>質問内容にある記述内容ではできないのでしょうか？
これは、あなたのていじした、さんぷるのことですよね。
どのたいみんぐで、どのばしょに、select ようそを、どのようなないようで、ひょうじするのかそうぞうりょくにとぼしい、わたしにはわかりません。
select ようそが５こあるのに、
var test1 = parseInt(document.getElementById('test1').options[document.getElementById('test1').selectedIndex].value);
が、test4 までの４こしかなく、
それをるーぷしょりしているわけでもなく、
document.getElementById('test1')　が、２どもしゅつげんし、むだにながかく、
document.getElementById('test1').value で、あたいをさんしょうできたのに・・・
parseInt のだい２ひきすうに、１０がなかったり、
<opiton value="１">１</opiton>　に、selected をしていしていなために、
if(isNaN(test1)){test1 = 0;}　のようなしょりを、いれるけっかとなっていたり、
と、どこにも select ようそを、ついかするぶぶんがありません。

（あっもう～朝だ。１行づつステップ実行させているのに理解できない日々が続く）

この回答への補足

説明不足で申し訳ありません。
なぜselectboxを増やしていくのかは自分やりたいサイトは参考サイトにあります。
http://www.s-pulse.co.jp/games/result/2011030507/の試合結果部分のみです。
参考サイトで簡単にご説明しますと入力画面にて前半と後半の得点がプラスされて3になり、なおかつプラスされた分だけ得点者欄に(3つの)selectboxが表示され、指名などを選択できるという作りをしたいと思っています。

自分でやる分には入力すれば早いのですが、別の人も触るためです。

>test4 までの４こしかなく
こちらは一つ抜けて入力していました。申し訳ありません。

>どこにも select ようそを、ついかするぶぶんがありません。
自分の知識不足で申し訳ありません。自分に考えて作ったのですが、ダメでしたか。

補足日時：2011/07/29 16:35

通報する

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2011/07/28 03:59

ぐだぐだなうえに、ねむくて、ちからつきる。

OTL

<!DOCTYPE html>
<title></title>
<form action="#">
　<p>
　　<select name="test1" onchange="calc (event);">
　　　<option value="0" selected>0</option>
　　　<option value="1">1</option>
　　　<option value="2">2</option>
　　　<option value="3">3</option>
　　　<option value="4">4</option>
　　　<option value="5">5</option>
　　</select>

　　<select name="test2" onchange="calc (event);">
　　　<option value="0" selected>0</option>
　　　<option value="1">1</option>
　　　<option value="2">2</option>
　　　<option value="3">3</option>
　　　<option value="4">4</option>
　　　<option value="5">5</option>
　　</select>

　　<select name="test3" onchange="calc (event);">
　　　<option value="0" selected>0</option>
　　　<option value="1">1</option>
　　　<option value="2">2</option>
　　　<option value="3">3</option>
　　　<option value="4">4</option>
　　　<option value="5">5</option>
　　</select>

　　<select name="test4" onchange="calc (event);">
　　　<option value="0" selected>0</option>
　　　<option value="1">1</option>
　　　<option value="2">2</option>
　　　<option value="3">3</option>
　　　<option value="4">4</option>
　　　<option value="5">5</option>
　　</select>

　　<select name="test5" onchange="calc (event);">
　　　<option value="0" selected>0</option>
　　　<option value="1">1</option>
　　　<option value="2">2</option>
　　　<option value="3">3</option>
　　　<option value="4">4</option>
　　　<option value="5">5</option>
　　</select>
　</p>
　<p id="total">0</p>
　<p id="numbers"></p>
</form>

<script type="text/javascript">

function createSelect (aryText, aryValue, selectedNo) {
　var d = this || document;
　var s = d.createElement ('select');
　var o = s.options;
　
　if (2 > arguments.length)
　　aryValue = aryText;
　
　for (var i = 0, I = aryText.length; i < I; i++) {
　　o[o.length] = new (d.parentWindow || d.defaultView).Option (String (aryText[i]) || '', String (aryValue[i]) || '');
　}
　
　s.selectedIndex = selectedNo || 0;
　return s;
}

function calc (event) {
　var c, d, s, t, i, j, J, o, t, u, v, w;
　var e = event.target || event.srcElement;
　var r = /^test\d+$/;
　
　if (r.test (e.name)) {
　　c = e.form.elements;
　　d = e.ownerDocument;
　　u = d.getElementById ('numbers');
　　s = createSelect.call (d, [0,1,2,3,4,5,6,7,8,9]);
　　
　　while (u.hasChildNodes ())
　　　u.removeChild (u.firstChild);
　　
　　for (t = i = 0; o = c[i++]; ) {
　　　if (r.test (o.name)) {
　　　　t += (J = Number (o.value));

　　　　if (u.hasChildNodes ())
　　　　　u.appendChild (d.createTextNode (' - '));
　　　　
　　　　for (j = 0; j < J; j++) {
　　　　　w = s.cloneNode (true);
　　　　　w.name = 'number_' + i + '_' + j;
　　　　　u.appendChild (w);
　　　　}
　　　}
　　}

　　d.getElementById ('total').firstChild.nodeValue = t;
　}
}
</script>

- 0
- 件

通報する

この回答へのお礼

お疲れのとこ回答いただき有難う御座います。
上記の内容でためさせていただきましたところできました。
しかし、わがままではありますが質問内容にある記述内容ではできないのでしょうか？

大変申し訳ありませんが、応用力がなく教えていただいた内容から変更ができなく困っています・・・

宜しくお願いします。

通報する

お礼日時：2011/07/29 01:03

No.2

回答者： babu_baboo
回答日時：2011/07/28 02:29

また、よくしつもんをみないで、かいとうしてしまったらしい。

>selectboxを数値の分だけだすのができなくて困っています。
この selectbox ってどんなの？（なかみもふくめて）

さいだいで、５×５で、２５こものそれが、ひつようなの？
てんきーから、うちこんだほうが、はやくない？
それでもそれが、かんがえうるさいてきな、ゆーざーいんたーふぇーす？

- 0
- 件

通報する

No.1

回答者： babu_baboo
回答日時：2011/07/28 00:31

ぜんかくくうはくは、はんかくにしてね。

select ようそに、 onchange="calc (event);" をつけていますが、
form ようそだけにつけて、うごくぶらうざもあります。
（いきぬきにかいたので、やっぱりいまひとつ）

<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<body>
<form action="#">
　<p>
　　<select name="test1" onchange="calc (event);">
　　　<option value="1" selected>1</option>
　　　<option value="2">2</option>
　　　<option value="3">3</option>
　　　<option value="4">4</option>
　　　<option value="5">5</option>
　　</select>

　　<select name="test2" onchange="calc (event);">
　　　<option value="1" selected>1</option>
　　　<option value="2">2</option>
　　　<option value="3">3</option>
　　　<option value="4">4</option>
　　　<option value="5">5</option>
　　</select>

　　<select name="test3" onchange="calc (event);">
　　　<option value="1" selected>1</option>
　　　<option value="2">2</option>
　　　<option value="3">3</option>
　　　<option value="4">4</option>
　　　<option value="5">5</option>
　　</select>

　　<select name="test4" onchange="calc (event);">
　　　<option value="1" selected>1</option>
　　　<option value="2">2</option>
　　　<option value="3">3</option>
　　　<option value="4">4</option>
　　　<option value="5">5</option>
　　</select>

　　<select name="test5" onchange="calc (event);">
　　　<option value="1" selected>1</option>
　　　<option value="2">2</option>
　　　<option value="3">3</option>
　　　<option value="4">4</option>
　　　<option value="5">5</option>
　　</select>
　</p>
　<p id="total">5</p>
</form>

<script type="text/javascript">
function calc (event) {
　var c, d, t, i, o;
　var e = event.target || event.srcElement;
　var r = /^test\d+$/;

　if ('SELECT' !== e.nodeName)
　　return;

　c = e.form.elements;
　d = e.ownerDocument;
　
　for (t = i = 0; o = c[i++]; )
　　if (r.test (o.name))
　　　t += Number (o.value);
　
　d.getElementById ('total').firstChild.nodeValue = t;
}
</script>

<script type="application/javascript; version=1.8">
function calc2 (event) {
　let e = event.target;
　let d = e.ownerDocument;
　let f = e.form;
　
　if ('SELECT' === e.nodeName) {
　　d.querySelector ('#total').textContent =
　　　String (Array.reduce (f.querySelectorAll ('select[name^="test"]'),
　　　　(function (r, s) r + Number (s.value)), 0))
　}
}
</script>