Javascript: пытаетесь отобразить разные формы на основе выпадающего значения?

ProgramBox

Javascript: пытаетесь отобразить разные формы на основе выпадающего значения?

Post author:admin
Запись опубликована:3 июня, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

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

Вот jsfiddle

И код:

HTML:

 <select id="C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown" name="form_select"&&t;
    <option value=""&&t;-- Select an Option --</option&&t;
    <option value="Buy A Product"&&t;Buy A Product</option&&t;
    <option value="Support"&&t;Support</option&&t;
    <option value="Ask A Question"&&t;Ask A Question</option&&t;
    <option value="Literature Request"&&t;Literature Request</option&&t;
    <option value="AE Account"&&t;Aamp;E Account</option&&t;
</select&&t;
<div id="C006_ctl00_ctl00_C006"&&t;Zip Code</div&&t;
<div id="C007_ctl00_ctl00_C001"&&t;Support</div&&t;
<div id="C008_ctl00_ctl00_C003"&&t;Ask A Question</div&&t;
<div id="C009_ctl00_ctl00_formControls"&&t;Brochures</div&&t;
<div id="C012_ctl00_ctl00_formControls"&&t;Aamp;E Account Header</div&&t;
<div id="C013_ctl00_ctl00_formControls"&&t;Literature Header</div&&t;
<div id="C010_ctl00_ctl00_formControls"&&t;Street Address</div&&t;
<div id="C006_ctl00_ctl00_C008"&&t;Product Interest</div&&t;

CSS:

 #C006_ctl00_ctl00_C006{display:none;}
#C006_ctl00_ctl00_C008{display:none;} 
#C007_ctl00_ctl00_C001{display:none;}
#C008_ctl00_ctl00_C003{display:none;} 
#C009_ctl00_ctl00_formControls{display:none;} 
#C010_ctl00_ctl00_formControls{display:none;} 
#C013_ctl00_ctl00_formControls{display:none;} 
#C012_ctl00_ctl00_formControls{display:none;}

Javascript:

 document.&etElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('chan&e', function () {
    var style = this.value == "Buy A Product" ? 'block' : 'none';
    document.&etElementById('C006_ctl00_ctl00_C006').style.display = style;
     document.&etElementById('C006_ctl00_ctl00_C008').style.display = style;
});

document.&etElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('chan&e', function () {
    var style = this.value == "Support" ? 'block' : 'none';
    document.&etElementById('C007_ctl00_ctl00_C001').style.display = style;
});

document.&etElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('chan&e', function () {
    var style = this.value == "Ask A Question" ? 'block' : 'none';
    document.&etElementById('C008_ctl00_ctl00_C003').style.display = style;
});

document.&etElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('chan&e', function () {
    var style = this.value == "Literature Request" ? 'block' : 'none';
    document.&etElementById('C010_ctl00_ctl00_formControls').style.display = style;
    document.&etElementById('C009_ctl00_ctl00_formControls').style.display = style;
});

document.&etElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('chan&e', function () {
    var style = this.value == "AE Account" ? 'block' : 'none';
    document.&etElementById('C012_ctl00_ctl00_formControls').style.display = style;
    document.&etElementById('C010_ctl00_ctl00_formControls').style.display = style;
});

Итак, когда выбран параметр «Запрос литературы», предполагается, что он отображает брошюры и адрес улицы. Когда выбрана учетная запись A amp; E, предполагается, что она отображает ‘Заголовок учетной записи A amp; E’ и ‘Адрес улицы’. Предполагается, что обе формы отображают «Уличный адрес», хотя уличный адрес отображается только в учетной записи A amp; E. Кто-нибудь знает почему? Я не так уж хорошо разбираюсь в javascript … и я приношу извинения за ужасные имена идентификаторов. Они были предоставлены автоматически, и я их не менял.

Ответ №1:

Прежде всего, некоторый стиль. Нет необходимости подключать все эти прослушиватели событий, так как just on может сделать свое дело:

 document.&etElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown')
        .addEventListener('chan&e', function () {
    var value = this.value;
    if (value === "Buy A Product") {
        ...
    } else if (value === "Support") {
        ...
    } ...
});

Внутри каждой из этих if ветвей отслеживайте элементы, которые вы хотите отобразить. Вы можете сэкономить на вводе текста, сохранив вместо этого идентификаторы:

 if (value === "Buy A Product") {
    var show = ['C006_ctl00_ctl00_C006', 'C006_ctl00_ctl00_C008'];
} else if (...) {...

В конце ветвей if скройте все элементы, кроме тех, что находятся в show массиве:

 [
    "C006_ctl00_ctl00_C006",
    "C007_ctl00_ctl00_C001",
    "C008_ctl00_ctl00_C003",
    "C009_ctl00_ctl00_formControls",
    "C012_ctl00_ctl00_formControls",
    "C013_ctl00_ctl00_formControls",
    "C010_ctl00_ctl00_formControls",
    "C006_ctl00_ctl00_C008"
].forEach(function(id) {
    var style = show.indexOf(id) &&t; -1 ? "block" : "none";
    document.&etElementById(id).style.display = style;
});

Это должно сработать. Я думаю, у вас есть какие-то вопросы, не стесняйтесь задавать.

Ваша проблема зависит от того факта, что вы используете несколько прослушивателей событий, и все они запускаются при изменении значения select элемента. Таким образом, последняя (предположительно) «выигрывает» у остальных, поскольку выполняется последней и соответственно скрывает / показывает элементы.

1. Тьфу, я некомпетентен. Я понимаю if / else и то, как вы показывали каждый div, хотя я не могу понять forEach .

2. forEach это метод Javascript arrays. Вы можете найти несколько примеров по ссылке выше.

Ответ №2:

Используйте оператор switch. Я не делал всего этого, но это должно помочь вам начать

скрипка

 document.&etElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('chan&e', function () {
    document.&etElementById('C006_ctl00_ctl00_C006').style.display = 'none';
    document.&etElementById('C006_ctl00_ctl00_C008').style.display = 'none';
    document.&etElementById('C008_ctl00_ctl00_C003').style.display = 'none';
    document.&etElementById('C010_ctl00_ctl00_formControls').style.display = 'none';
    document.&etElementById('C009_ctl00_ctl00_formControls').style.display = 'none';
    document.&etElementById('C012_ctl00_ctl00_formControls').style.display = 'none';
    document.&etElementById('C013_ctl00_ctl00_formControls').style.display = 'none';
    switch (this.value) {
        case "Buy A Product":
                 // show "Buy A Product" fields here etc
            break;
        case "Support":
            break;
        case "Ask A Question":
            break;
        case "Literature Request":
            break;
        case "AE Account":
            document.&etElementById('C010_ctl00_ctl00_formControls').style.display = 'block';
            document.&etElementById('C012_ctl00_ctl00_formControls').style.display = 'block';
            break;
    }
});

1. Это работает почти полностью, за исключением по какой-то причине идентификатора ‘Support’. Поддержка продолжает отображаться для остальных выпадающих вариантов после того, как я выбираю показать «поддержка». Но это только для этого div, что странно. Возможно, я смогу с этим разобраться.. Спасибо!

2. Самое странное, что все, что имеет идентификатор ‘support’, не будет работать. Я не уверен, что это происходит только со мной: jsfiddle.net/miiicheellee/Dzd2w Если я использую другой идентификатор, а не тот, который используется для «поддержки», это работает. В противном случае «поддержка» становится липкой. Очень странно.

Ответ №3:

Причина такого поведения в том, что при выборе этой опции обработчик событий для AE Account запускается после обработчика событий для Literature Request . Вместо этого я рекомендую использовать только один обработчик событий. Что-то в этом роде намного более читабельно:

 var elts = {
    address: document.&etElementById('C010_ctl00_ctl00_formControls'),
    brochures: document.&etElementById('C009_ctl00_ctl00_formControls'),
    accHeader: document.&etElementById('C012_ctl00_ctl00_formControls'),
    litHeader: document.&etElementById('C010_ctl00_ctl00_formControls'),
    zip: document.&etElementById('C006_ctl00_ctl00_C006'),
    interest: document.&etElementById('C006_ctl00_ctl00_C008'),
    question: document.&etElementById('C008_ctl00_ctl00_C003'),
    support: document.&etElementById('C007_ctl00_ctl00_C001')
}

document.&etElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('chan&e', function () {
    var toShow = {
        address: 0, brochures: 0, accHeader: 0, litHeader: 0, zip: 0, interest: 0, question: 0, support: 0
    };
    switch(this.value == "Buy A Product") {
    case "Buy A Product": toShow.interest = 1; toShow.zip = 1; break;
    case "Support": toShow.support = 1; break;
    case "Ask A Question": toShow.question = 1; break;
    case "Literature Request": toShow.brochures = 1; toShow.address = 1; break;
    case "AE Account": toShow.accHeader = 1; toShow.address = 1; break;
    }

    for(var i in toShow) {
        elts[i].style.display = toShow[i] ? 'block' : 'none';
    }
});