- ベストアンサー
同じものを繰り返し表示させる
下記の(1)のような「1」～「3」まで選択可能なセレクトメニューにおいて、 「1」を選択すると(2)の部分を1つ、「2」を選択すると(2)の部分を2つ、「3」を選択すると(2)の部分を3つ、表示させるようにしたいと思っています。 (2)の部分を3つ書き、JavaScriptを使用して(1)のセレクトメニューで選択した数によって、 (2)の部分を1つ表示させたり、2つ表示させたり、3つ表示させたりすることはできました。 しかし、3つならまだよいのですが、5つ、6つ、それ以上となると、 (2)の部分を5つ、6つも同じことを書くのは面倒で、無駄が多いように思います。 (2)の部分を1つだけ書いた上で、(1)の選択した数の分だけ(2)を表示させる方法はないでしょうか。 よろしくお願いいたします。 (1)-------------------------------- <select name="id"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> ----------------------------------- (2)-------------------------------- <table> <tr> <td> <select name="number"> <option value="1000">1000</option> <option value="2000">2000</option> <option value="3000">3000</option> </select> </td> </tr> <tr> <td> <select name="name"> <option value="sato">sato</option> <option value="sakamoto">sakamoto</option> <option value="hanada">hamada</option> <option value="wakui">wakui</option> </select> </td> </tr> </table> -----------------------------------
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
<html> <head> <title>copy</title> <script type="text/javascript"> function ab(dd){ var TR = document.getElementsByTagName('tr'); for(var i=1;i<TR.length;i++){TR[i].style.display = "none";} for(var i=1;i<dd+2;i++){TR[i].style.display = "block";} } </script> </head> <body> <table> <tr> <td> <select id="number" onchange="ab(this.selectedIndex)"> <option value="1000">1000</option> <option value="2000">2000</option> <option value="3000">3000</option> </select> </td> </tr> <script type="text/javascript"> var OPTION = document.getElementById('number').getElementsByTagName('option'); for(var i=0;i<OPTION.length;i++){ document.write('<tr>'); document.write('<td>'); document.write('<select name="name">'); document.write('<option value="sato">sato</option>'); document.write('<option value="sakamoto">sakamoto</option>'); document.write('<option value="hanada">hamada</option>'); document.write('<option value="wakui">wakui</option>'); document.write('</select>'); document.write('</td>'); document.write('</tr>'); } var TR = document.getElementsByTagName('tr'); for(var i=1;i<TR.length;i++){TR[i].style.display = "none";} </script> </table> </body> </html>
お礼
回答ありがとうございます。 参考にさせていただきたいと思います。
お礼
回答ありがとうございます。 試してみたいと思います。