jquery显示隐藏问题

Question

我有 2 个单选按钮，选择它们后将显示相关的下拉菜单并隐藏另一个。

问题是，单击时显示/隐藏效果很好，但如果我单击“ parking 场”开始，则会出现“ parking 场”下拉菜单；然后选择“建筑物”，建筑物下拉菜单将取代它；但是，如果我再次单击“ parking 场”，建筑物下拉列表将保留并且不会被替换。

似乎只能工作一次。

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>

Answer 1

尝试一次，同时从两个单选按钮中删除 onchange 属性:

$('input:radio').change(function () {
    if ($('#buildings').is(':checked')) {
        $('#carParkDiv').removeClass('show').addClass('hidden');
        $('#buildingDiv').removeClass('hidden').addClass('show');
    } else if ($('#carparks').is(':checked')) {
        $('#carParkDiv').removeClass('hidden').addClass('show');
        $('#buildingDiv').removeClass('show').addClass('hidden');
    }
});

DEMO HERE