- ベストアンサー
セレクトボックス自動表示の困りごと
- セレクトボックス自動表示の方法について困っています。合計の数値まで表示できるのですが、数値の分だけセレクトボックスを表示する方法がわかりません。
- セレクトボックスの数値の合計表示はできているのですが、数値の分だけセレクトボックスを表示できません。
- セレクトボックスの数値の合計までは表示できるのですが、数値の分だけセレクトボックスを表示する方法がわかりません。困っています。
- h-h13
- お礼率24% (37/149)
- JavaScript
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
このながれだと、おれがぜんぶかいてしまいそうだ。やばい！×２。 （いつもかぶせてくるひとが、ちがうほうでいそがしそうだし（笑）） あとは、がんばってね。（ますますださくなってしまった） <!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>
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
なんとなくわかった。でもきっと、それでもふそく。 えんちょうせんとかないのか？ PKのけっかとか、ひつようないのか？ たいせんあいてチームのぶんもひつようじゃないのか？ にゅうりょくしたけっかを、さーばーとかにあっぷするの？ それなら、input ようそとかの、けっかをうけとる cgi がわにあわせなくていいの？ と、いろいろと。 はやいはなし、HTMLのこっかくぶぶんだけでも、かいてくれると、もうそうしやすいよ。 さいしんのぶらうざでもよさそうだね。（にやり）
- babu_baboo
- ベストアンサー率51% (268/525)
ごめんなさい。しょうじきなところ、あなたのきぼうする かんせいずがわかりません。 >質問内容にある記述内容ではできないのでしょうか？ これは、あなたのていじした、さんぷるのことですよね。 どのたいみんぐで、どのばしょに、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 ようそを、ついかするぶぶんがありません。 （あっもう～朝だ。１行づつステップ実行させているのに理解できない日々が続く）
- babu_baboo
- ベストアンサー率51% (268/525)
ぐだぐだなうえに、ねむくて、ちからつきる。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>
お礼
お疲れのとこ回答いただき有難う御座います。 上記の内容でためさせていただきましたところできました。 しかし、わがままではありますが質問内容にある記述内容ではできないのでしょうか？ 大変申し訳ありませんが、応用力がなく教えていただいた内容から変更ができなく困っています・・・ 宜しくお願いします。
- babu_baboo
- ベストアンサー率51% (268/525)
また、よくしつもんをみないで、かいとうしてしまったらしい。 >selectboxを数値の分だけだすのができなくて困っています。 この selectbox ってどんなの？（なかみもふくめて） さいだいで、５×５で、２５こものそれが、ひつようなの？ てんきーから、うちこんだほうが、はやくない？ それでもそれが、かんがえうるさいてきな、ゆーざーいんたーふぇーす？
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくは、はんかくにしてね。 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>
補足
説明不足で申し訳ありません。 なぜselectboxを増やしていくのかは自分やりたいサイトは参考サイトにあります。 http://www.s-pulse.co.jp/games/result/2011030507/の試合結果部分のみです。 参考サイトで簡単にご説明しますと入力画面にて前半と後半の得点がプラスされて3になり、なおかつプラスされた分だけ得点者欄に(3つの)selectboxが表示され、指名などを選択できるという作りをしたいと思っています。 自分でやる分には入力すれば早いのですが、別の人も触るためです。 >test4 までの４こしかなく こちらは一つ抜けて入力していました。申し訳ありません。 >どこにも select ようそを、ついかするぶぶんがありません。 自分の知識不足で申し訳ありません。自分に考えて作ったのですが、ダメでしたか。