Показать Div и Скрыть все остальные Когда выбрано

Question

Кажется, что это должно быть легко, но я еще не получил его работу. У меня есть элемент выбора html с параметрами 10 или около того. Когда пользователь выбирает одну из опций, отображается Div, удаляя класс .hidden, который является просто классом с дисплеем: none в CSS. Все это работает отлично, но когда я выбираю следующий вариант, предыдущий div остается видимым. Я пытался использовать .toggleClass, но это не сработало.

$(function() { 
    $("#calc-select").change(function() { 
    $('#' + $("#calc-select").val()).removeClass('hidden'); 
    }); 
}); 

Answer 1

Что вы можете сделать, это сохранить ранее выбранную опцию в переменную как так

$(function() { 
 
    var prevSelected = $("#Test1"); 
 

 
    $("#calc-select").change(function() { 
 
     $('#' + $("#calc-select").val()).removeClass('hidden'); 
 
     prevSelected.addClass('hidden'); 
 
     prevSelected = $('#' + $("#calc-select").val()); 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="calc-select"> 
 
    <option>Test1</option> 
 
    <option>Test2</option> 
 
    <option>Test3</option> 
 
    <option>Test4</option> 
 
    <option>Test5</option> 
 
</select> 
 

 
<div id="Test1"> 
 
Content 1 
 
</div> 
 
<div id="Test2" class="hidden"> 
 
Content 2 
 
</div> 
 
<div id="Test3" class="hidden"> 
 
Content 3 
 
</div> 
 
<div id="Test4" class="hidden"> 
 
Content 4 
 
</div> 
 
<div id="Test5" class="hidden"> 
 
Content 5 
 
</div>

Теперь то, что этот JQuery код делает устанавливается первое выбранное значение в первом вариант. Далее, что он делает, это удалить скрытый класс, а затем добавит класс обратно к предыдущему выбранному. Наконец, он переназначает ранее выбранный элемент на текущий выбранный элемент. Таким образом, ранее выбранный постоянно обновляется, и соответственно отображаются и скрываются div.