フォームを二段階表示　非表示をする方法

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                <option value="orange">オレンジ</option>
9            </select>
10        </td>
11    </tr>
12    <!-- 表示非表示切り替え -->
13    <tr id="apple-select">
14        <th>りんごの種類</th>
15        <td><input type="text" /></td>
16    </tr>   
17    <!-- 表示非表示切り替え -->
18    <tr id="peach-select">
19        <th>ももの種類</th>
20        <td><input type="text" /></td>
21    </tr>

function itemChange(){
  if(document.getElementById('changeSelect')){
    var id = document.getElementById('changeSelect').value;        
    document.getElementById('apple-select').style.display = "none";
    document.getElementById('peach-select').style.display = "none";
    if(id == 'apple'){
      document.getElementById('apple-select').style.display = "";
    }else if(id == 'peach'){
      document.getElementById('peach-select').style.display = "";
    }
  }
}
window.addEventListener('DOMContentLoaded', function(e){
  itemChange();
})

上記のようなプログラムを作成しています。
ここからhtmlを下記のように変更する場合のjavascriptに困っています。
例くだものでりんごを選択→りんごの種類を選択→ふじを選択すると個数が表示
（その他の項目は非表示）
という二段階でのselectを利用した非表示表示を作りたいです。

```html
<tr>
        <th>くだもの</th>
        <td>
            <select id="changeSelect" name="hoge" onchange="itemChange();">
　　　　　　　　　　　　　　　　　　<option value="">選択してください</option>
                <option value="apple">りんご</option>
                <option value="peach">もも</option>
            </select>
        </td>
    </tr>
    <!-- 表示非表示切り替え りんごを選んだ時-->
    <tr id="apple-select">
        <th>りんごの種類</th>
        <td><input type="text" />
         <select id="changeSelect" name="hoge" onchange="itemChange();">
　　　　　　　　　<option value="">選択してください</option>
                <option value="fuji">ふじ</option>
                <option value="tsugaru">つがる</option>
         </select>
     </td>
<!-- 表示非表示切り替え ふじを選んだ時 -->
    <tr id="fuji-select">
        <th>ふじの個数</th>
        <td><input type="text" /></td>
    </tr>
<!-- 表示非表示切り替え つがるを選んだ時 -->
     <tr id="tsugaru-select">
        <th>つがるの個数</th>
        <td><input type="text" /></td>
    </tr>
    <!-- 表示非表示切り替え ももを選んだ時-->
    <tr id="peach-select">
        <th>ももの種類</th>
        <td><input type="text" /></td>
    </tr>


よろしくお願いします。

※先程答えていただいた方々ありがとうございます。誤解を与える表現で申し訳ございませんでした。
前の回答はベストアンサーを選ばせて頂き再度こちらで質問しています。

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

回答1件

ベストアンサー

色々書き換えましたが参考になれば。変更箇所と理由は以下のとおりです。

tableを書き換えてsectionとdivを利用

階層がわかりにくいのが個人的に嫌だったのとinputを置きたかったからです。
0. ラジオボタンとcssで表示の制御
javascriptのプログラムをわかりやすくするためです。itemChangeは値の代入だけしています。

html
1<!doctype html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6    <style type="text/css">
7        section>h3,section>div{
8            display: inline-block;
9        }
10        input[type='radio']{
11            display: none;
12        }
13        input[type='radio']+section{
14            display:none;
15        }
16        input[type='radio']:checked+section{
17            display: block;
18        }
19    </style>
20</head>
21<body>
22    <form>
23        <section>  
24            <h3>くだもの</h3>  
25            <div>  
26                <select id="changeSelect" name="hoge" onchange="itemChange(this,'fruits')">  
27                    <option value="2">選択してください</option>  
28                    <option value="0">りんご</option>  
29                    <option value="1">もも</option>  
30                </select>  
31            </div>  
32        </section>  
33        <!-- 表示非表示切り替え りんごを選んだ時-->  
34        <input type="radio" name="fruits" value="apple">
35        <section id="apple-select">
36            <h3>りんごの種類</h3>  
37            <div>
38                <input type="text" />  
39                <select id="changeSelect" name="hoge" onchange="itemChange(this,'a-type')">  
40                    <option value="2">選択してください</option>  
41                    <option value="0">ふじ</option>  
42                    <option value="1">つがる</option>  
43                </select>  
44            </div>
45            <!-- 表示非表示切り替え ふじを選んだ時 -->
46            <input type="radio" name="a-type" value="fuji">
47            <section id="fuji-select"> 
48                <h3>ふじの個数</h3>  
49                <div>
50                    <input type="text" />
51                </div>  
52            </section>  
53            <!-- 表示非表示切り替え つがるを選んだ時 -->  
54            <input type="radio" name="a-type" value="tsugaru">
55            <section id="tsugaru-select">  
56                <h3>つがるの個数</h3>  
57                <div>
58                    <input type="text" />
59                </div>  
60            </section>  
61        </section>  
62        <!-- 表示非表示切り替え ももを選んだ時-->  
63        <input type="radio" name="fruits" value="peach">
64        <section id="peach-select">
65            <h3>ももの種類</h3>  
66            <div>
67            <input type="text" />
68            </div>  
69        </section>
70        <input type="radio" name="fruits" value="none">
71        <input type="radio" name="a-type" value="none">
72    </form>
73
74</body>
75</html>
76<script>
77function itemChange(obj,radio_name){
78    var val = obj.options[obj.selectedIndex].value;
79    var radio = document.forms[0][radio_name][Number(val)];
80    radio.checked=true;
81}
82</script>