Включить выпадающий выбор, используя флажок, включить зависимый выпадающий список и видимость DIV

Question

У меня есть интересный сценарий, включающий использование флажка для включения раскрывающегося списка. После изменения статуса 1-го выпадающего списка он должен включить 2-й выпадающий список. Как только выбор сделан во втором выпадающем списке, он переключает видимость 2 скрытых DIV. Как на картинке ниже:

У меня есть прототип JSFIDDLE , над которым я работаю но есть несколько проблем со сценарием, таких как:

1- Несмотря на то, что раскрывающиеся списки содержат атрибут " disabled ", который должен быть включен только один раз флажок установлен, но он работает только в том случае, если вы установите флажок 2 раза. Вот скрипт:

var $checkBox = $('#mondayTransfer'),
    $select = $('#mondayOptions');
$checkBox.on('change',function(e){
    if ($(this).is(':checked')){
        $select.removeAttr('disabled');
    }else{
       $select.attr('disabled','disabled');
    }
});

2- 2-й выпадающий список также должен быть отключен; изменения в первом выпадающем списке позволят это сделать. Вот сценарий:

$(function(){
    $('select').change(function(){
        if($(this).attr('id') == 'mondayOptions' && $(this).val() == 'Default'){
            $('select').not(this).prop('disabled', true).val('Disabled');
        } else {
           $('select').not(this).removeProp('disabled');
           $('select option').removeProp('disabled');
           $('select').each(function(){
               var val = $(this).val();
                if(val != 'Default' || val != 'Disabled'){
                    $('select option[value="'+val+'"]').not(this).prop('disabled', true);
                }
            });
        }
    });

});

3- Как только флажок снят, все выпадающие списки должны быть отключены.

I Буду признателен за любую помощь.

Answer 1

Я немного рефакторинг вашего кода, вы можете проверить его здесь

let $checkBox = $('#mondayTransfer');

let divClasses = ['.ach', '.flash'];    
let selects = ['#mondayOptions', '#box_g2'];    

let setDisplayNone = function(className) {
  divClasses.forEach(function(className) {
    $(className).css("display", 'none');
  });
}

$checkBox.on('change',function(e){
    if ($(this).is(':checked')){
        $('#mondayOptions').removeAttr('disabled');
    } else {
        // Disable both selects when mondayOptions is CHECKED
        $('select').attr('disabled','disabled');

        // Loop through each div you can select and set its display none
        setDisplayNone(divClasses)

        // Loop each select you have and then select the "selected" option
        selects.forEach(function(className) {
            $(className).val('selected');
        });
    }
});

$(document).ready(function() {
  // When mondayOption is changed enable the second drop-down
  $("#mondayOptions").change(function() {
    $("#box_g2").attr("disabled", false)
  });

  // When the second drop-down changes its value
  $("#box_g2").change(function() {
    // set display none to all toggleDiv
    setDisplayNone(divClasses)

    // fetch the value selected
    let className = $(this).val();

    // use jquery to select the div and set the display yo block
    $('.' + className).css('display', 'block')
  });
});

Если вы удалите весь код из // Включить выпадающий раздел Выбор вашего фрагмента вы получил бы часть поведения, которое вы хотели бы, а именно:

В любом случае, вот как это работает сейчас:

Когда у вас установлен флажок CHECKED :

1. Включить первый раскрывающийся список.

Если вы отметили флажок НЕ ПРОВЕРЕНО :

1. Отключено оба выбора
2. Сделайте все .divToggle невидимыми с помощью функции setDisplayNone
3. Сбросьте значение выбора до значения по умолчанию ("selected" в вашем случае)

При выборе значения во втором раскрывающемся списке:

1. Сделать все .divToggle невидимым с помощью функции setDisplayNone
2. получить выбранное значение
3. используйте jquery, чтобы выбрать div и установить дисплей йо-блок

Answer 2

Проверьте это рабочее демо: http://jsfiddle.net/wth8mrLa/

Обновлены некоторые ваши скрипты;

1) перемещены скрипты в DOM ready

2 ) добавлена ​​переменная select box2 $select2 = $('#box_g2');

3) когда флажок снят, отключите оба поля выбора, сбросьте нулевые значения и скройте div

остальные сценарии одинаковы.

JQUERY

//Toggle DIV Visibility Using the 2nd Dropdown Selection
$(document).ready(function() {

    $("select").change(function() {
        $(this).find("option:selected").each(function() {
            var optionValue = $(this).attr("value");
            if (optionValue) {
                $(".divToggle").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else {
                $(".divToggle").hide();
            }
        });
    }).change();

    //Toggle 1st Selection Dropdown Once Checkbox is Checked
    var $checkBox = $('#mondayTransfer'),
        $select = $('#mondayOptions'),
        $select2 = $('#box_g2');

    $checkBox.on('change', function(e) {
        if ($(this).is(':checked')) {
            $select.prop('disabled', false);
        } else {
            $select.val('').prop('disabled', true);
            $select2.val('').prop('disabled', true);
            $(".divToggle").hide();
        }
    });

    //Enable DropDown Selection
    $(function() {
        $('select').change(function() {
            if ($(this).attr('id') == 'mondayOptions' && $(this).val() == 'Default') {
                $('select').not(this).prop('disabled', true).val('Disabled');
            } else {
                $('select').not(this).removeProp('disabled');

                $('select option').removeProp('disabled');
                $('select').each(function() {
                    var val = $(this).val();
                    if (val != 'Default' || val != 'Disabled') {
                        $('select option[value="' + val + '"]').not(this).prop('disabled', true);
                    }
                });
            }
        });
    });

});

Answer 3

Все ваши js коды должны быть внутри функций document.ready ().

$(document).ready(function() {
   //paste your code here....
});