Как переключить вид дивы на основе множественного выбора поле выбора

голоса
0

Немного начинающий вопрос. Я пытаюсь применить JavaScript для страницы контента оприходования Drupal, где, если пользователь выбирает X из меню множественного выбора выпадающего, а затем показать DIVS 1,2 и 4. Если они выбирают Y и Z, показывает эти соответствующие поля ,

У меня уже есть основной рабочий сценарий (даже если немного уродливый и beginer-МОГ), исходя от одинарного выбора. Но у меня есть множественный выбор выберите выпадающее меню.

Я предполагаю, что это делается путем ввода выбранного варианта в массив и проверка против этого. Но это немного выше моих навыков, и я не могу найти хороший пример для моего сценария:

Черт, я даже не могу пройти мимо просто показывает предупреждение с множеством вариантов, не говоря уже о смене кода, как мне нужно. Я вижу предложение использовать $ (это) .val (); ... но я получаю сообщение об ошибке в консоли: «$ не является функцией.» Я попытался синтаксис JQuery и синтаксис яваскрипта, предполагая, что я сделал это правильно. Я уверен, что мой модуль Drupal знает принять JQuery, если это вопрос.

(Как примечание стороны, я уверен, что есть более простой / короткий путь для переключения дивы с помощью атрибута класса или выборочного тоже. Но, все различных идентификаторов и сценарии, эти методы не кажется, любая корочей.)

Как новичок в Javascript, я надеюсь, что хорошо объяснил. Вот сценарий, я сделал и хочу изменить:

if(window.attachEvent) {
    window.attachEvent('onload', whenLoaded);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            whenLoaded(evt);
        };
            window.onload = newonload;
    } else {
        window.onload = whenLoaded;
    }
}

function whenLoaded() {

  document.getElementById('edit-field-resource-type').addEventListener('change', function () {
  alert(this.value); // test to show worked.
       // alert($(this).val()); // tried for multiple choices - didn't work: 
       // $ is not a function .. I tried this way too: $(this).value;
       // var choices_array = [];

    var showWebinars = this.value == taxonomy_term-14 ? 'block' : 'none';
    var showCaseStudies = this.value == taxonomy_term-12 ? 'block' : 'none';
    var showWhitePapers = this.value == taxonomy_term-11 ? 'block' : 'none';
    var showVideos = this.value == taxonomy_term-13 ? 'block' : 'none';
    var showPodcasts = this.value == taxonomy_term-62 ? 'block' : 'none';
    var showOther = this.value == taxonomy_term-16 ? 'block' : 'none';
    var showInfographics = this.value == taxonomy_term-10 ? 'block' : 'none';

document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
document.getElementById('edit-field-event-duration-wrapper').style.display = showWebinars;

document.getElementById('edit-field-infographic-file-wrapper').style.display = showInfographics;

document.getElementById('edit-field-video-embed-wrapper').style.display = showVideos;
document.getElementById('edit-field-video-third-party-wrapper').style.display = 

document.getElementById('edit-field-audio-file-wrapper').style.display = showPodcasts;
document.getElementById('edit-field-audio-file-link-wrapper').style.display = showPodcasts;

document.getElementById('edit-field-resource-file-wrapper').style.display = showWhitePapers;
document.getElementById('edit-field-resource-file-wrapper').style.display = showWhitePapers;

document.getElementById('edit-field-infographic-file-wrapper').style.display = showInfographics;


   });

}
Задан 07/11/2018 в 20:06
источник пользователем
На других языках...                            


3 ответов

голоса
0

Если вы создали содержание типа нормальный способ просто использовать модуль «Условный Fields».

Вам не нужно кодировать эту функциональность.

Ответил 09/11/2018 в 15:47
источник пользователем

голоса
0

Я буду продолжать исследовать указанную опцию JQuery, но необходимо исследовать другие вопросы с Drupal CMS, не позволяя JQuery работать, даже если он добавлен в YML.

В то же время, вот модифицированный скрипт, который работал для меня. Уродливые и долго, но он работал. Я приветствую любые отзывы о том, как оптимизировать или лучше сделать это в пределах моих ограничений

document.getElementById('edit-field-resource-type').addEventListener('change', function () {

         function loopSelected() {

             var selectedArray = new Array();

             var selObj = document.getElementById('edit-field-resource-type');
             var i;
             var count = 0;
             for (i=0; i<selObj.options.length; i++) {
               if (selObj.options[i].selected) {
                 selectedArray[count] = selObj.options[i].value;
                 count++;
               }
             }


             var showWebinars = selectedArray.includes("taxonomy_term-14") ? 'block' : 'none';
             var showCaseStudies = selectedArray.includes("taxonomy_term-12") ? 'block' : 'none';
             var showWhitePapers = selectedArray.includes("taxonomy_term-11") ? 'block' : 'none';
             var showVideos = selectedArray.includes("taxonomy_term-13") ? 'block' : 'none';
             var showPodcasts = selectedArray.includes("taxonomy_term-62") ? 'block' : 'none';
             var showOther = selectedArray.includes("taxonomy_term-16") ? 'block' : 'none';
             var showInfographics = selectedArray.includes("taxonomy_term-10") ? 'block' : 'none';

             alert(showWebinars);

             document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-event-duration-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-byline-wrapper').style.display = showWebinars;

             document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-event-duration-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-byline-wrapper').style.display = showWebinars;
             document.getElementById('edit-post-webinar-copy-wrapper').style.display = showWebinars;
             document.getElementById('edit-field-event-date-range-wrapper').style.display = showWebinars;

             document.getElementById('edit-field-infographic-file-wrapper').style.display = showInfographics;

             document.getElementById('edit-field-video-embed-wrapper').style.display = showVideos;
             document.getElementById('edit-field-video-third-party-wrapper').style.display = showVideos;
             document.getElementById('edit-field-video-type-wrapper').style.display = showVideos;

             document.getElementById('edit-field-audio-file-wrapper').style.display = showPodcasts;
             document.getElementById('edit-field-audio-file-link-wrapper').style.display = showPodcasts;


           }

        loopSelected();

    });

    }
Ответил 07/11/2018 в 21:33
источник пользователем

голоса
0

Использование JQuery, что - то похожее на это должно работать для вас (обратите внимание , что #персонаж будет выбирать элементы по их , idа также .персонаж будет выбирать элементы по их class.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#edit-field-resource-type').change(function(){
                var v = $(this).val();
                $('.all-options').hide(); //hide all the divs first, then only show the ones you want to show
                if(v==='something-1'){
                    $('.something-1').show();
                }
                else if(v==='something-2'){
                    $('.something-2').show();
                }
                // and so on...
            });
        });
    </script>
</head>
Ответил 07/11/2018 в 21:26
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more