Kana

Hello,

I am a complete beginner to JavaScript and learning as I go along.

I have a dropdown list of "channel" and would like to show a different set of fields depending on user selection:

<select onchange="channelChoice(this)" name="Channel" id="Channel">
    <option value="Banner_">Banner</option>
    <option value="Retailer_">Retailer</option>
    <option value="Print_">Print</option>
    <option value="Social_">Social</option>
    <option value="Website_">Website</option>
  </select>

<div id="retailerOption" style="display:none">

<select onchange="retailerChoice(this)" name="Retailer" id="Retailer">
    <option value="Amazon">Amazon</option>
    <option value="Other">Other</option>
  </select>

<input type="text" id="RetailerName" placeholder="select your retailer" style="display:none;">
</div>

<div id="printOption" style="display:none">

<select onchange="printChoice(this)" name="Print" id="Print">
    <option value="Magazine">Magazine</option>
    <option value="Journal">Journal</option>
    <option value="Stands">Stands</option>
    <option value="Other">Other</option>
  </select>
 
  <input type="text" id="PrintType" name="PrintType" placeholder="what is your print asset type?" style="display:none;">
</div>

<div id="socialOption" style="display:none">

<select name="SocialMedia" id="SocialMedia">
    <option value="Facebook">Facebook</option>
    <option value="Instagram">Instagram</option>
    <option value="YouTube">YouTube</option>
  </select>

<select name="SocialPostFormat" id="SocialPostFormat">
    <option value="Carousel">Carousel</option>
    <option value="Static_Post">Static Post</option>
    <option value="Story">Story</option>
    <option value="Video">Video</option>
  </select>
</div>

<div id="webOption" style="display:none">

<select onchange="webChoice(this)" name="Country" id="Country">
    <option value="AwardLogo">Award Logo</option>
    <option value="RetailerLogo">Retailer Logo</option>
    <option value="LandingPageImage">Landing Page Image</option>
  </select>
</div>

I had been playing around with this JavaScript:

<script type="text/javascript">
function channelChoice(elem) {
   if(elem.value == "Retailer_")
 document.getElementById('retailerOption').style.display = 'block';
 			else if(elem.value == "Print_")
        document.getElementById('printOption').style.display = 'block';
        	else if(elem.value == "Social_")
        document.getElementById('socialOption').style.display = 'block';
        	else if(elem.value == "Website_")
        document.getElementById('webOption').style.display = 'block';
}  
  
function retailerChoice(elem) {
    if(elem.value == "Other")
 document.getElementById('RetailerName').style.display = 'block';
        else
        document.getElementById('RetailerName').style.display = 'none';
}
function printChoice(elem) {
    if(elem.value == "Other")
 document.getElementById('PrintType').style.display = 'block';
        else
        document.getElementById('PrintType').style.display = 'none';
}
</script>

I could display fields no problem but my issue is to hide if, for example, a user select "Print" after initially selecting "Retailer". 

Played around by adding "none" line:

if(elem.value == "Retailer_")
 document.getElementById('retailerOption').style.display = 'block';
             else if(elem.value !== "Retailer_")
        document.getElementById('printOption').style.display = 'none';
			else if(elem.value == "Social_")
        document.getElementById('socialOption').style.display = 'block';

and so on, but didn't work.

Can someone please help me how I can code so when a user selects "Retailer" then Retailer Option DIV will show but then if they selects "Print", Retailer Div disappears but "Print" DIV appears etc?

Thank you.