Как сделать изменение контента, при выборе пункта в выпадающем списке?

Question

[Smeecy Smeecy]

Есть какая-нибудь информация, по поводу реализации меняющегося контента в зависимости от выбора пункта в выпадающем списке?

Comments

[Abdula Magomedov]

Без js?

[Smeecy Smeecy]

Abdula Magomedov: можно и с js , хотя бы какую-то информацию

Answer 1

[Сергей Фейк]

Очень четкий вопрос. Могу дать такой же ответ: "Есть"

Comments

[Smeecy Smeecy]

Не могли бы навести на эту информацию?)

[Сергей Фейк]

Алексей Орлов: Делаешь три блока с контентом. Делаешь им display: none; Потом делаешь класс .show { display: block; }
Потом делаешь три кнопки
А потом делаешь следующее: при нажатии на первую кнопку, добавляешь класс .show первому блоку, при нажатии на вторую - добавляешь второму, и тд.
это понятно как сделать?

[Smeecy Smeecy]

foms_mc: вполне:)

[Сергей Фейк]

Алексей Орлов: только еще перед тем как добавлять этот класс одному блоку, нужно удалить его у всех трех, и только потом добавлять

[Smeecy Smeecy]

foms_mc: угу, плюс у меня не один выпиадающий список, а два...

Answer 2

[Comex7]

HTML:

<select id="primer">
    <option disabled>Выберите</option>
    <option value="str1">Контент 1</option>
    <option value="str2">Контент 2</option>
    <option value="str3">Контент 3</option>
</select><br />
<span class="element">Контент 1</span>

JAVASCRIPT:

$(function() {
    $('#primer').change(function () {
        var vibor = $(this).find(':selected').val();
        if(vibor == 'str1') {
        	$('.element').text('Контент 1');
        } else if(vibor == 'str2') {
        	$('.element').text('Контент 2');
        } else if(vibor == 'str3') {
        	$('.element').text('Контент 3');
        } 
    });
 
});

Comments

[Smeecy Smeecy]

можно сделать изначально .element {display:none} и написать $('.element').fadeIn() , но тогда придется делать разные классы .element , чтобы отображался разный контент , верно?