Stack Overflow на русском Asked by Greedy Wizard on November 5, 2021
Помогите сделать так чтобы определенные пункты появлялись и пропадали в зависимости от того какой "тип занятости выбран"
Не совсем понимаю как это реализовывается на JS (jquery). Помогите пожалуйста!
<div class="row">
<div class="col-12">
<h2 class="fs-title">Занятость:</h2>
</div>
</div>
<div class="row">
<div class="col-6">
<label class="fieldlabels">Тип занятости:</label>
<select name="svedeniya_o_rabote" id="svedeniya_o_rabote" class="is-valid">
<option value="Штатный работник" selected="">Штатный работник</option>
<option value="Индивидуальный предприниматель">Индивидуальный предприниматель</option>
<option value="Самозанятое лицо">Самозанятое лицо</option>
<option value="Пенсионер">Пенсионер</option>
<option value="Студент">Студент</option>
<option value="Социальный бенифициар / В декретном отпуске">Социальный бенифициар / В декретном отпуске</option>
<option value="Безработный">Безработный</option>
</select>
</div>
<div class="col-6">
<label class="fieldlabels">Сфера деятельности:</label>
<select name="sfera_deyatelnosti" id="sfera_deyatelnosti" class="is-valid">
<option value="Не выбрано" selected="">Не выбрано</option>
<option value="Добывающая промышленность">Добывающая промышленность</option>
<option value="Здравоохранение">Здравоохранение</option>
<option value="Информатика, телекоммуникации, IT">Информатика, телекоммуникации, IT</option>
<option value="Легкая и пищевая промышленность">Легкая и пищевая промышленность</option>
<option value="Наука и культура">Наука и культура</option>
<option value="Общественное питание">Общественное питание (кафе, рестораны)</option>
<option value="Охранное предприятие">Охранное предприятие (ЧОП, детективное агентство)</option>
<option value="Реклама, маркетинг, PR, СМИ">Реклама, маркетинг, PR, СМИ</option>
<option value="Сельское хозяйство">Сельское хозяйство</option>
<option value="Силовые структуры">Силовые структуры (ВC, МЧС, МВД и т.п.)</option>
<option value="Торговля оптовая, риелторская деятельность">Торговля оптовая, риелторская деятельность</option>
<option value="Торговля розничная">Торговля розничная</option>
<option value="Федеральное и муниципальное управление">Федеральное и муниципальное управление</option>
<option value="Финансы, страхование, банковское дело">Финансы, страхование, банковское дело</option>
<option value="Химия, парфюмерия, фармацевтика">Химия, парфюмерия, фармацевтика</option>
<option value="Юридические и нотариальные услуги">Юридические и нотариальные услуги</option>
<option value="Иное">Иное</option>
</select>
</div>
</div>
<div class="row">
<div class="col-6">
<label class="fieldlabels">Место работы:</label>
<input type="text" name="mesto_raboty" id="mesto_raboty" placeholder="" />
</div>
<div class="col-6">
<label class="fieldlabels">Адрес в свободной форме:</label>
<input type="text" name="adres_raboty" id="adres_raboty" placeholder="" />
</div>
</div>
<div class="row">
<div class="col-6">
<label class="fieldlabels">Телефон места работы:</label>
<input type="tel" name="phone_raboty" maxlength="12" id="phone_raboty" placeholder="+7(___) ___-__-__" />
</div>
<div class="col-6">
<label class="fieldlabels">Должность:</label>
<input type="text" name="doljnost" id="doljnost" placeholder="" />
</div>
</div>
<div class="row">
<div class="col-6">
<label class="fieldlabels">Источник дохода:</label>
<select name="istochnik_dohoda" id="istochnik_dohoda" class="is-valid">
<option value="Не выбрано" selected="">Не выбрано</option>
<option value="Заработная плата">Заработная плата</option>
<option value="Доходы от предпринимательской деятельности">Доходы от предпринимательской деятельности</option>
<option value="Пенсия">Пенсия</option>
<option value="Стипендия">Стипендия</option>
<option value="Пособие">Пособие</option>
<option value="Другие доходы">Другие доходы</option>
</select>
</div>
<div class="col-6">
<label class="fieldlabels">Сумма среднемесячного дохода (руб):</label>
<input type="number" name="srednemesyachnii_dohod" id="srednemesyachnii_dohod" placeholder="" />
</div>
</div>
<div class="row">
<div class="col-6">
<label class="fieldlabels">Общая сумма ежемесячных обязательств (руб):</label>
<input type="number" name="ejemesyachnie_obyazatelstva" id="ejemesyachnie_obyazatelstva" placeholder="" />
</div>
<div class="col-6">
<label class="fieldlabels">Сумма среднемесячных платежей по всем действующим потребительским кредитам и займам (руб):</label>
<input type="number" name="summa_po_kreditam" id="summa_po_kreditam" placeholder="" />
</div>
</div>
<div class="row">
<div class="col-6">
<label class="fieldlabels">Задолженность по всем кредитам (руб):</label>
<input type="number" name="zadoljennost_po_kreditam" id="zadoljennost_po_kreditam" placeholder="" />
</div>
<div class="col-6">
<label class="fieldlabels">Цель займа:</label>
<select name="cel_zaima" id="cel_zaima" class="is-valid">
<option value="Не выбрано" selected="">Не выбрано</option>
<option value="Ремонт дома и автомобиля">Ремонт дома и автомобиля</option>
<option value="Непредвиденные расходы">Непредвиденные расходы</option>
<option value="Покупка бытовой техники и электроники">Покупка бытовой техники и электроники</option>
<option value="Ежедневные расходы">Ежедневные расходы</option>
<option value="Медицинские услуги">Медицинские услуги</option>
<option value="Подарки">Подарки</option>
<option value="Путешествия, отдых">Путешествия, отдых</option>
<option value="Образование">Образование</option>
<option value="Бизнес">Бизнес</option>
<option value="Другое">Другое</option>
</select>
</div>
</div>
Например когда выбрано "Пенсионер" пропадает "Сфера деятельности:" "Место работы" "Адрес в свободной форме" "Телефон места работы:" "Должность:"
select.addEventListener("change", function (e) {
// Безработный
if (select.value === "Безработный") {
sfera.value = "Не выбрано";
sfera.closest("div").style.display = "none";
mesto.closest("div").style.display = "none";
adres.closest("div").style.display = "none";
phone.closest("div").style.display = "none";
doljnost.closest("div").style.display = "none";
} else {
sfera.closest("div").style.display = "block";
mesto.closest("div").style.display = "block";
adres.closest("div").style.display = "block";
phone.closest("div").style.display = "block";
doljnost.closest("div").style.display = "block";
}
// Социальный бенифициар
if (select.value === "Социальный бенифициар") {
sfera.value = "Не выбрано";
sfera.closest("div").style.display = "none";
mesto.closest("div").style.display = "none";
adres.closest("div").style.display = "none";
phone.closest("div").style.display = "none";
doljnost.closest("div").style.display = "none";
} else {
sfera.closest("div").style.display = "block";
mesto.closest("div").style.display = "block";
adres.closest("div").style.display = "block";
phone.closest("div").style.display = "block";
doljnost.closest("div").style.display = "block";
}
// Пенсионер
if (select.value === "Пенсионер") {
sfera.value = "Не выбрано";
sfera.closest("div").style.display = "none";
mesto.closest("div").style.display = "none";
adres.closest("div").style.display = "none";
phone.closest("div").style.display = "none";
doljnost.closest("div").style.display = "none";
} else {
sfera.closest("div").style.display = "block";
mesto.closest("div").style.display = "block";
adres.closest("div").style.display = "block";
phone.closest("div").style.display = "block";
doljnost.closest("div").style.display = "block";
}
// Студент
if (select.value === "Студент") {
sfera.value = "Не выбрано";
sfera.closest("div").style.display = "none";
mesto.closest("div").style.display = "none";
adres.closest("div").style.display = "none";
phone.closest("div").style.display = "none";
doljnost.closest("div").style.display = "none";
} else {
sfera.closest("div").style.display = "block";
mesto.closest("div").style.display = "block";
adres.closest("div").style.display = "block";
phone.closest("div").style.display = "block";
doljnost.closest("div").style.display = "block";
}
// Самозанятый
if (select.value === "Самозанятый") {
sfera.value = "Не выбрано";
mesto.closest("div").style.display = "none";
adres.closest("div").style.display = "none";
phone.closest("div").style.display = "none";
doljnost.closest("div").style.display = "none";
} else {
mesto.closest("div").style.display = "block";
adres.closest("div").style.display = "block";
phone.closest("div").style.display = "block";
doljnost.closest("div").style.display = "block";
}
// Индивидуальный предприниматель
if (select.value === "Предприниматель") {
sfera.value = "Не выбрано";
adres.closest("div").style.display = "none";
phone.closest("div").style.display = "none";
doljnost.closest("div").style.display = "none";
} else {
adres.closest("div").style.display = "block";
phone.closest("div").style.display = "block";
doljnost.closest("div").style.display = "block";
}
});
Можно просто скрывать блок и обнулять значение. Написал только для сферы деятельности, остальное по примеру.
var select = document.getElementById('svedeniya_o_rabote');
var sfera = document.getElementById('sfera_deyatelnosti');
select.addEventListener('change', function(e) {
if(select.value === 'Пенсионер'){
sfera.value = 'Не выбрано';
sfera.closest('div').style.display = 'none';
}else{
sfera.closest('div').style.display = 'block';
}
});
Answered by fortavey on November 5, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP