html
1<tr>
2		<th>くだもの</th>
3		<td>
4			<select id="changeSelect" name="hoge" onchange="itemChange();">
5　　　　　　　　　　　　　　　　　　<option value="">選択してください</option>
6				<option value="apple">りんご</option>
7				<option value="peach">もも</option>
8			</select>
9		</td>
10	</tr>
11	<!-- 表示非表示切り替え -->
12	<tr id="apple-select">
13		<th>りんごの種類</th>
14		<td><input type="text" /></td>
15	</tr>	
16	<!-- 表示非表示切り替え -->
17	<tr id="peach-select">
18		<th>ももの種類</th>
19		<td><input type="text" /></td>
20	</tr>

<script type="text/javascript">
	function itemChange(){
		if(document.getElementById('changeSelect')){
			id = document.getElementById('changeSelect').value;		
			if(id == 'apple'){
				document.getElementById('apple-select').style.display = "";
				document.getElementById('peach-select').style.display = "none";
			}else if(id == 'peach'){
				document.getElementById('apple-select').style.display = "none";
				document.getElementById('peach-select').style.display = "";
			}
		}
	}
	window.onload = itemChange;
</script>

上記のようなプログラムを作っています。
やりたいことは
デフォルトが選択して下さいになっていて、かつ非表示切り替えの部分が表示されていないようにしたいです。
また今後くだものが増えていった時の効率の良い書き方などを教えていただけたら・・・
まだまだ初心者です、、よろしくお願いします。

行動規範の内容に同意します

回答2件

HTML
1<option value="" selected="selected">選択してください</option>

JavaScript
1    function itemChange() {
2        var id = document.getElementById('changeSelect').value;
3        var trs = document.querySelectorAll('tr[id]');
4        for (var i = 0; i < trs.length; i++) {
5            trs[i].style.display = 'none';
6        }
7
8        if (id) {
9            document.getElementById(id + '-select').style.display = 'table-row';
10        }
11    }

投稿2017/12/20 08:50

x_x

総合スコア13749

ベストアンサー

いまのフローを優先するならこんなかんじでしょうか？

javascript
1function itemChange(){
2  if(document.getElementById('changeSelect')){
3    var id = document.getElementById('changeSelect').value;        
4    document.getElementById('apple-select').style.display = "none";
5    document.getElementById('peach-select').style.display = "none";
6    if(id == 'apple'){
7      document.getElementById('apple-select').style.display = "";
8    }else if(id == 'peach'){
9      document.getElementById('peach-select').style.display = "";
10    }
11  }
12}
13window.addEventListener('DOMContentLoaded', function(e){
14  itemChange();
15})
16
17

追記

javascript
1window.addEventListener('DOMContentLoaded', function(){
2  func1();
3});
4document.addEventListener('change',function(e){
5  var t=e.target;
6  if(t.nodeName=="SELECT" || t.nodeName=="INPUT" && t.type=="radio"){
7    func1();
8  }
9});
10function func1(){
11  var v1=document.querySelector('#changeSelect').value;
12  var v2=document.querySelector('[name=entryPlan]:checked').value;
13  var v3=document.querySelector('[name=entryPlan2]:checked').value;
14  var s1=document.querySelector('#apple-select').style;
15  var s2=document.querySelector('#fuji').style;
16  var s3=document.querySelector('#tsugaru').style;
17  var s4=document.querySelector('#peach-select').style;
18  var s5=document.querySelector('#outou').style;
19  var s6=document.querySelector('#hakutou').style;
20
21  s1.display="none";
22  s2.display="none";
23  s3.display="none";
24  s4.display="none";
25  s5.display="none";
26  s6.display="none";
27  switch(v1){
28  case "apple":
29    s1.display="";
30    if(v2=="hoge1") s2.display="";
31    if(v2=="hoge2") s3.display="";
32    break;
33  case "peach":
34    s4.display="";
35    if(v3=="hoge1") s5.display="";
36    if(v3=="hoge2") s6.display="";
37    break;
38    
39  }
40}

HTML
1<table>
2<tr>
3<th>くだもの</th>
4<td>
5<select id="changeSelect" name="hoge">
6<option value="">選択してください</option>
7<option value="apple">りんご</option>
8<option value="peach">もも</option>
9</select>
10</td>
11</tr>
12<tr id="apple-select">
13<th>りんごの種類</th>
14<td>
15<label><input type="radio" name="entryPlan" value="hoge1" checked>ふじ</label>
16<label><input type="radio" name="entryPlan" value="hoge2">つがる</label>
17</td>
18</tr>
19<tr id="fuji">
20<th>ふじの個数</th>
21<td><input type="text"></td>
22</tr>
23<tr id="tsugaru">
24<th>つがるの個数</th>
25<td><input type="text"></td>
26</tr>
27<tr id="peach-select">
28<th>ももの種類</th>
29<td>
30<label><input type="radio" name="entryPlan2" value="hoge1" checked>黄桃</label>
31<label><input type="radio" name="entryPlan2" value="hoge2">白桃</label></td>
32</tr>
33<tr id="outou">
34<th>黄桃の個数</th>
35<td><input type="text"></td>
36</tr>
37<tr id="hakutou">
38<th>白桃の個数</th>
39<td><input type="text"></td>
40</tr>
41</table>

投稿2017/12/20 08:38

編集2017/12/20 11:11

yambejp

総合スコア114769

io-rin

2017/12/20 10:40

ご回答ありがとうございます。ちなみに申し訳ございません。先程のプログラムを利用し更に select後、ラジオボタンで分岐の場合 ```html <tr id="apple-select"> <th>りんごの種類</th> <td><label><input type="radio" name="entryPlan" value="hoge1" onclick="itemChange1();" checked="checked" />ふじ</label> <label><input type="radio" name="entryPlan" value="hoge2" onclick="itemChange1();" />つがる</label></td> </tr> <tr id="peach-select"> <th>ももの種類</th> <td><label><input type="radio" name="entryPlan2" value="hoge1" onclick="itemChange1();" checked="checked" />黄桃</label> <label><input type="radio" name="entryPlan2" value="hoge2" onclick="itemChange1();" />白桃</label></td> </tr>  <tr id="fuji"> <th>ふじの個数</th> <td><input type="text" /></td> </tr> <tr id="tsugaru"> <th>つがるの個数</th> <td><input type="text" /></td> </tr> <tr id="outou"> <th>黄桃の個数</th> <td><input type="text" /></td> </tr> <tr id="hakutou"> <th>白桃の個数</th> <td><input type="text" /></td> </tr> ``` ```javascript <script type="text/javascript"> function itemChange1(){ radio = document.getElementsByName('entryPlan') if(radio[0].checked) { document.getElementById('fuji').style.display = ""; document.getElementById('tsugaru').style.display = "none"; 　　　　　　　　document.getElementById('outou').style.display = "none"; document.getElementById('hakutou').style.display = "none"; }else if(radio[1].checked) { document.getElementById('fuji').style.display = "none"; document.getElementById('tsugaru').style.display = ""; document.getElementById('outou').style.display = "none"; document.getElementById('hakutou').style.display = "none"; } } function itemChange2(){ radio = document.getElementsByName('entryPlan2') if(radio[0].checked) { document.getElementById('fuji').style.display = "none"; document.getElementById('tsugaru').style.display = "none"; 　　　　　　　　document.getElementById('outou').style.display = ""; document.getElementById('hakutou').style.display = "none"; }else if(radio[1].checked) { document.getElementById('fuji').style.display = "none"; document.getElementById('tsugaru').style.display = "none"; document.getElementById('outou').style.display = "none"; document.getElementById('hakutou').style.display = ""; } } window.onload = itemChange1; </script> ``` りんごをセレクトしたらラジオボタンでふじかつがるかを聞く→選択後それぞれの個数を聞くももをセレクトしたらラジオボタンで白桃か黄桃かを聞く→選択後それぞれ個数を聞くという事をやりたいです。お手数ですがよろしくお願いします。