Скрыть / Показать DIV блок при выборе select пункта
Автор Макс ПуляДанный 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']();
  });
});
Такой код работает очень хорошо!
Всем удачи и добра!
Опубликовано в
Веб-разработки
Теги
Макс Пуля
Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.
Последнее от Макс Пуля
- $100 длиной в 2,5 года: доход сайта AdSense за два с половиной года
 - Поворот текста, текст по диагонали CSS
 - Как сделать верхний слой неактивным (некликабельным) CSS pointer-events
 - VideoRoll.net - отзыв и обзор партнёрской программы по видеорекламе
 - Высота iframe в зависимости от содержимого
 - Ajax подгрузка контента по клику в div jQuery
 - Как прибавить или вычесть процент от числа на PHP/JavaScript
 - Как отключить просмотр исходного кода, проверку элемента и правую кнопку на сайте
 - Новые планы: разработка мобильной игры
 - Сервер, проекты и ffmpeg