Скрыть / Показать 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