下記の(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>
-----------------------------------
No.1ベストアンサー
- 回答日時:
いろいろやり方はあるでしょうけど、とりあえず
ただ同じデータを表示するなら以下のような感じで
繰り返し表示処理をするとよいでしょう。
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>
No.2
- 回答日時:
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
optionのselectedは更新時は効...
-
フォーム選択後のリンクを作る方法
-
セレクトメニューで2つの項目...
-
SELECT要素について
-
プルダウンメニューのターゲッ...
-
Application.ScreenUpdating = ...
-
int(input("○○"))の使い方
-
PerlでXMLを解析して出力する。
-
PICで世界時計を作りたいのですが
-
整数でないとき
-
CGI メールフォームからBCCのア...
-
CGI初心者です
-
1つのプログラム内で"html出力...
-
JSONで文字列が長い時
-
確認画面に空白がでます
-
perlがうごきません
-
awkの正規表現での最左最短マッ...
-
javaのパッケージ構成で各パッ...
-
実行時エラー 3020の対策
-
前日の日付取得するには?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
セレクトメニューで2つの項目...
-
<SELECT>タグの折り返し
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
複数列を持ったリストボックス...
-
セレクトボックスの「選択して...
-
セレクトボックスの内容を中央寄せ
-
セレクトボックスから別窓にジ...
-
プルダウンメニューで中央表示
-
select や option のCSS設定
-
セレクトボックスである項目を...
-
プルダウンリストの背景色の指定
-
同じものを繰り返し表示させる
-
selectタグ内の特定のoptionの...
-
【プルダウンで選んでGOボタン...
-
html、youtube動画を埋め込みた...
-
formのoptionでEnter(Return)す...
-
プルダウンメニューのターゲッ...
-
プルダウンメニューがプルアップに
おすすめ情報