javascript - 如何组织显示 Div 和关闭

Question

您好，我在这段代码上工作了很长时间，并且有 HTML 代码和 JavaScript。 这是我的 HTML 代码。

<div id="showDiv" style="display:none;" class"answer_radio" > <tr>
<td><input type="radio" name="inputC[0]" value="1" /> 1</td>
<td><input type="radio" name="inputC[0]" value="2" /> 2</td>
 <td><input type="radio" name="inputC[0]" value="3" /> 3</td>
</tr></div>
<div id="placeDiv" style="display:none;" class"answer_radio" > <tr>
<td><input type="radio" name="inputC[0]" value="4" /> 4</td>
<td><input type="radio" name="inputC[0]" value="5" /> 5</td>
<td><input type="radio" name="inputC[0]" value="6" /> 6</td>
</tr></div>
<select id="car" value="Show Div" >
<option value="volvo" name="volvo" onclick="showDiv()">Volvo</option>
<option value="saab" name="saab" onclick="placeDiv()">Saab</option>
<option value="opel">Opel</option>
<option value="audi" >Audi</option>

和 JavaScript 代码:

function showDiv() {
   document.getElementById('showDiv').style.display = "block"; 
}
function placeDiv() {
   document.getElementById('placeDiv').style.display = "block";
}

正如您所看到的，如果运行该代码，它将显示包含汽车的下拉列表。 如果点击“volvo”，则会显示“1,2,3”单选按钮。 如果点击“saab”，则会显示“4,5,6”单选按钮。 但我的问题是... 如果我先单击“Volvo”，然后单击“Saab”，则会显示所有 6 个单选按钮。 但我希望如果我单击“Volvo”然后单击“saab”，则仅显示 3 个单选按钮(如果有人理解的话)... 我只需要显示“1,2,3”或“4,5,6”单选按钮。 这不是完全完成的代码，我将为其他汽车做这件事......

Answer 1

也许这会有帮助？但这不是一个很好的编码技术，因为它会导致大量代码重复，特别是当您添加更多汽车时......

function showDiv() {
   document.getElementById('showDiv').style.display = "block"; 
   document.getElementById('placeDiv').style.display = "none"; 
}
function placeDiv() {
   document.getElementById('placeDiv').style.display = "block";
   document.getElementById('showDiv').style.display = "none"; 
}