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に困っています。
```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件
あなたの回答
tips
プレビュー