Javascript：尝试根据下拉值显示不同的形式？ [英] Javascript: Trying to show different forms based on drop down value?

问题描述

我尝试根据所选下拉列表的值显示不同的表单。我已经有几乎所有的工作，虽然看起来当两个值都显示相同的形式它给我一个错误。

I'm trying to display different forms based on the value of the selected drop down. I've got it almost all working, although it seems that when two values both display the same form it gives me an error.

这里是 jsfiddle

Here is the jsfiddle

代码：

HTML：

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

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：

Javascript:

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

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

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

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

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

因此，当选择Literature Request时，应显示手册和街道地址。当选择A& E帐户时，应显示A& E帐户头和街道地址。两者都应显示街道地址，但只有A& E帐户显示街道地址。有人知道为什么吗？我不是所有的梦幻般的javascript ...和我为可怕的ID名称道歉。

So when 'Literature Request' is selected, it's supposed to display Brochures and Street Address. When A&E Account is selected it is supposed to show 'A&E Account Header' and 'Street Address'. Both are supposed to display 'Street Address', although only A&E Account is displaying street address. Does anyone know why? I'm not all that fantastic at javascript... and I apologize for the terrible ID names. They were automatically given and I haven't changed them.

推荐答案

使用switch语句。

Use a switch statement. I didn't do the whole thing but it should get you started

小提示

document.getElementById('C002_ctl00_ctl00_C022_ctl00_ctl00_dropDown').addEventListener('change', function () {
    document.getElementById('C006_ctl00_ctl00_C006').style.display = 'none';
    document.getElementById('C006_ctl00_ctl00_C008').style.display = 'none';
    document.getElementById('C008_ctl00_ctl00_C003').style.display = 'none';
    document.getElementById('C010_ctl00_ctl00_formControls').style.display = 'none';
    document.getElementById('C009_ctl00_ctl00_formControls').style.display = 'none';
    document.getElementById('C012_ctl00_ctl00_formControls').style.display = 'none';
    document.getElementById('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.getElementById('C010_ctl00_ctl00_formControls').style.display = 'block';
            document.getElementById('C012_ctl00_ctl00_formControls').style.display = 'block';
            break;
    }
});

这篇关于Javascript：尝试根据下拉值显示不同的形式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！