同じものを繰り返し表示させる

解決済

質問者：sihori
質問日時：2006/08/26 19:45
回答数：2件

下記の(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件)

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

No.1ベストアンサー

回答者： yambejp
回答日時：2006/08/26 20:11

いろいろやり方はあるでしょうけど、とりあえず

ただ同じデータを表示するなら以下のような感じで
繰り返し表示処理をするとよいでしょう。

selectタグの名前を変えたりするならもう少し
プログラム的な処理が必要になります。

<html>
<head>
<script language=javascript>
function view(){
var obj=document.getElementById('count');
var str="";
for(i=0;i<obj.value;i++){
str+=document.getElementById('hiddenArea').innerHTML;
}
document.getElementById('viewArea').innerHTML=str;
}
</script>
</head>
<body onLoad="view()">
<form>
<select id="count" onChange="view()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<div id="hiddenArea" style="display:none;">
<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>
</div>
<div id="viewArea"></div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
試してみたいと思います。

通報する

お礼日時：2006/08/31 23:37

No.2

回答者： noname#20964
回答日時：2006/08/27 00:23

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