Тема: style.display
Показать сообщение отдельно
  #7 (permalink)  
Старый 06.02.2014, 03:18
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

рони,

<style>
	.hide {
		display: none;
	}
	.show {
		display: block;
	}
</style>
<select id="brand">
	<option disabled selected>Категория автомобиля</option>
	<option value="jeep">джип</option>
	<option value="sedan">седан</option>
	<option value="hatchback">хэтчбек</option>
	<option value="bus">автобус</option>
</select>
<div id="result">
	<div class="hide jeep">джип</div>
	<div class="hide bus">автобус</div>
	<div class="hide bus">автобус1</div>
	<div class="hide sedan">седан</div>
	<div class="hide sedan">седан2</div>
	<div class="hide hatchback">хэтчбек</div>
</div>
<script>
	brand.onchange = function () {
		for (
			var els = document.querySelectorAll("#result>div"), 
			l = els.length, clsName, div; 
			l--;
		)
		div = els[l], clsName = div.className, 
		div.className = clsName.indexOf(this.value) != -1 
			? clsName + ' show'
			: clsName.replace(' show', '');
	}; 
</script>

поправил синтаксис написания

Последний раз редактировалось Vlasenko Fedor, 06.02.2014 в 04:20.
Ответить с цитированием