JSFiddle - React, Tailwind, and code Playground

by Michelle Alexandra

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

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