Данный 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'](); }); });
Такой код работает очень хорошо!
Всем удачи и добра!
Поделитесь с друзьями этой статьей!
Опубликовано в
Веб-разработки
Теги


Последнее от Макс Пуля
- Поворот текста, текст по диагонали CSS
- Как сделать верхний слой неактивным (некликабельным) CSS pointer-events
- VideoRoll.net - отзыв и обзор партнёрской программы по видеорекламе
- Высота iframe в зависимости от содержимого
- Ajax подгрузка контента по клику в div jQuery
- Как прибавить или вычесть процент от числа на PHP/JavaScript
- Как отключить просмотр исходного кода, проверку элемента и правую кнопку на сайте
- Новые планы: разработка мобильной игры
- Сервер, проекты и ffmpeg
- Семантическое ядро сайта