1

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

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

似乎只工作一次。

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

2 回答 2

3

试试这个，同时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');
    }
});

在这里演示

于 2013-04-04T13:24:15.780 回答
0

您可以更简单地做到这一点：
只需将您的 DIV ID 修改为与您的输入值相似：

例如：

<input type="radio" name="whereto" id="carparks" value="carparks">
<div id="carparksDiv" class="hidden">...</div>

LIVE DEMO

$('[name=whereto]:input').change(function(){
  if(this.checked){
      $('#'+ this.value +'Div').show().siblings('.hidden').hide();
  } 
});
于 2013-04-04T13:55:49.103 回答