2 つのラジオ ボタンがあり、選択すると関連するドロップダウンが表示され、もう一方は非表示になります。
問題は、シングルクリックで表示/非表示が正常に機能することですが、「駐車場」をクリックして開始すると、駐車場のドロップダウンが表示されます。[建物] を選択すると、[建物] ドロップダウンが代わりに表示されます。ただし、[駐車場] をもう一度クリックすると、[建物] ドロップダウンが残り、置き換えられません。
1回しか機能しないようです。
function hide(){
if(document.getElementById('buildings').checked) {
$('#carParkDiv').removeClass('show').addClass('hidden');
$('#buildingDiv').removeClass('hidden').addClass('show');
$('input:radio[id="carparks"]').prop('checked', false);
}else if(document.getElementById('carparks').checked) {
$('#carParkDiv').removeClass('hidden').addClass('show');
$('#buildingDiv').removeClass('show').addClass('hidden');
$('input:radio[id="buildings"]').attr('checked', false);
}
}
<input type="radio" name="whereto" id="buildings" value="buildings" onchange="hide();"><label for="buildings">Buildings</label>
<input type="radio" name="whereto" id="carparks" value="carparks" onchange="hide();"><label for="carparks">Carparks</label><br>
<div id="buildingDiv" class="hidden">
<select id="buildingList" name="buildingList" onchange="addLocation();">
<option>Buildings</option>
<option value="B1">B1</option>
<option value="B12">B12</option>
</select>
</div>
<div id="carParkDiv" class="hidden">
<select id="carParkList" name="carParkList" onchange="addLocation();">
<option>Car Parks</option>
<option value="Visitor">Visitor</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>