TransWikia.com

Помогите разобраться с интерактивной анкетой

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";
    }
    
  });

One Answer

Можно просто скрывать блок и обнулять значение. Написал только для сферы деятельности, остальное по примеру.

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP