Среда, 02 Декабрь 2020 16:31

Скрыть / Показать DIV блок при выборе select пункта

Автор

Оцените материал
(2 голосов)

Данный JavaScript скрывает / показывает определенный DIV блок в зависимости от выбора списка select.

На самом деле все очень просто, всё основывается на id. Таким образом можно показывать и скрывать не только DIV, а все что угодно, главное присвоить id.

Для работы скрипта нужно подключить библиотеку jQuery, если она не подключена:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Возьмем кусок кода с select, где будет выбираться тип недвижимости. Нам нужно сделать, чтобы при выборе типа Коммерческая недвижимость появлялся дополнительный выбор (в моем случае checkbox ы), то есть скрытый DIV.

Часть кода HTML

<div class="form-group">
    	<label for="exampleFormControlSelect2">Вид недвижимости:</label>
    		<select class="form-control" id="exampleFormControlSelect2" name="view">
				<option></option>
				<option value="Квартира">Квартира</option>
				<option value="Дом">Дом</option>
				<option value="Дача">Дача</option>
				<option value="Коммерческая недвижимость">Коммерческая недвижимость</option>
				<option value="Земельный участок">Земельный участок</option>
				<option value="Прочая недвижимость">Прочая недвижимость</option>
		</select>
</div>
	
	<div id="magiya-com-ned-add" style="display: none;">
	<span class="dopchoise"><input type="checkbox" name="obshepit" value="Общепит">Общепит</span>
	<span class="dopchoise"><input type="checkbox" name="zdanie" value="Здание">Здание</span>
	<span class="dopchoise"><input type="checkbox" name="ofis" value="Офис">Офис</span>
	<span class="dopchoise"><input type="checkbox" name="sto" value="СТО-автомойка">СТО-автомойка</span>
	<span class="dopchoise"><input type="checkbox" name="prombaza" value="Промбазы-склады">Промбазы-склады</span>
	<span class="dopchoise"><input type="checkbox" name="krasota" value="Индустрия красоты">Индустрия красоты</span>
	<span class="dopchoise"><input type="checkbox" name="medicina" value="Медицина">Медицина</span>
	<span class="dopchoise"><input type="checkbox" name="investicia" value="Инвестиция">Инвестиция</span>
	<span class="dopchoise"><input type="checkbox" name="sport" value="Спорт">Спорт</span>
	<span class="dopchoise"><input type="checkbox" name="prochee" value="Прочее">Прочее</span>
	</div>

Теперь код JavaScript

$(document).ready(function(){
  $('#exampleFormControlSelect2').change(function(){
    $('#magiya-com-ned-add')[$(this).val()=='Коммерческая недвижимость' ? 'show' : 'hide']();
  });
});

Такой код работает очень хорошо!

Всем удачи и добра!

Прочитано 271 раз

Поделитесь с друзьями этой статьей!

Макс Пуля

Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.

epicblog.net

Оставить комментарий