フォーム項目の表示 非表示をする方法

Question

<tr>
        <th>くだもの</th>
        <td>
            <select id="changeSelect" name="hoge" onchange="itemChange();">
　　　　　　　　　　　　　　　　　　<option value="">選択してください</option>
                <option value="apple">りんご</option>
                <option value="peach">もも</option>
                <option value="orange">オレンジ</option>
            </select>
        </td>
    </tr>
    <!-- 表示非表示切り替え -->
    <tr id="apple-select">
        <th>りんごの種類</th>
        <td><input type="text" /></td>
    </tr>   
    <!-- 表示非表示切り替え -->
    <tr id="peach-select">
        <th>ももの種類</th>
        <td><input type="text" /></td>
    </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に困っています。

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

よろしくお願いします。

※答えていただいた方々ありがとうございます。誤解を与える表現で申し訳ございません。

Comments

[x_x]

この提示されたコードさえ理解していない……ということでしょうか？

[io-rin]

大変失礼しました。言葉が足りなく申し訳ございません。

Answer 1

たとえばこう

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('[name=hoge]').addEventListener('change',function(e){
    var t=e.target;
    var v=t.value;
    var p=t.parentNode.parentNode.parentNode;
    Array.prototype.forEach.call(p.querySelectorAll('tr[id]'),function(x){
      var dsp='';
      if(x.getAttribute('id')!==v+'-select'){
        dsp='none';
      }
      x.style.display=dsp;
    });
  });
});

<table>
<tbody>
<tr>
<th>くだもの</th>
<td>
<select id="changeSelect" name="hoge">
<option value="">選択してください</option>
<option value="apple">りんご</option>
<option value="peach">もも</option>
<option value="orange">オレンジ</option>
</select>
</td>
</tr>
<tr id="apple-select" style="display:none">
<th>りんごの種類</th>
<td><input type="text" /></td>
</tr>   
<tr id="peach-select" style="display:none">
<th>ももの種類</th>
<td><input type="text" /></td>
</tr>
</tbody>
</table>