Javascript - Second Drop-down Menu Disappears After Selection?

Question

I have multiple drop down menus that correlate with each other. The first selection reveals a second menu (one of two), which in turn reveals content (Menu-ception!). However, when you finish this process the second menu disappears, I would like it to remain open for easy access.

I want to stick with plain Javascript for the moment, no JQuery solutions please.

I am new to coding so go easy haha. Any help is appreciated, Cheers!

 document.getElementById('target').addEventListener('change', function() { 'use strict'; var vis = document.querySelector('.vis'), target = document.getElementById(this.value); if (vis !== null) { vis.className = 'inv'; } if (target !== null) { target.className = 'vis'; } }); document.getElementById('trad').addEventListener('change', function() { 'use strict'; var vis = document.querySelector('.vis'), target = document.getElementById(this.value); if (vis !== null) { vis.className = 'inv'; } if (target !== null) { target.className = 'vis'; } }); document.getElementById('simp').addEventListener('change', function() { 'use strict'; var vis = document.querySelector('.vis'), target = document.getElementById(this.value); if (vis !== null) { vis.className = 'inv'; } if (target !== null) { target.className = 'vis'; } }); 

  p { font-size: 2.5vw; font-family: arial; } select { width: auto; margin: 0; font-size: 2.5vw; font-family: arial; } .inv { display: none; } 

 <select id="target"> <option value="">System</option> <option value="trad">Traditional</option> <option value="simp">Simplfit</option> <select> <select id="trad" class="inv"> <option value="">Width</option> <option value="content1">400</option> <option value="content2">600</option> <option value="content3">800</option> <option value="content4">1000</option> <option value="content5">1210</option> <select> <select id="simp" class="inv"> <option value="">Width</option> <option value="content6">400</option> <option value="content7">600</option> <option value="content8">800</option> <option value="content9">1000</option> <option value="content10">1210</option> <select> <p id="content1" class="inv">Content 1</p> <p id="content2" class="inv">Content 2</p> <p id="content3" class="inv">Content 3</p> <p id="content4" class="inv">Content 4</p> <p id="content5" class="inv">Content 5</p> <p id="content6" class="inv">Content 6</p> <p id="content7" class="inv">Content 7</p> <p id="content8" class="inv">Content 8</p> <p id="content9" class="inv">Content 9</p> <p id="content10" class="inv">Content 10</p> 

Answer 1

The problem was the way you are fetching the visible element for trad and simp handlers.

Since you were fetching the .vis element with queryselector it will return the current select element because that is having the vis class instead of one of the content<\\d> element, just fine tuning that selector should fix the problem.

 document.getElementById('target').addEventListener('change', function() { 'use strict'; var vis = document.querySelector('select.vis'), target = document.getElementById(this.value), ct = document.querySelector('.content.vis'); if (vis !== null) { vis.className = 'inv'; } if (target !== null) { target.className = 'vis'; } if (ct != null) { ct.className = 'content inv'; } }); document.getElementById('trad').addEventListener('change', function() { 'use strict'; var vis = document.querySelector('.vis:not(select)'), target = document.getElementById(this.value); if (vis !== null) { vis.className = 'content inv'; } if (target !== null) { target.className = 'content vis'; } }); document.getElementById('simp').addEventListener('change', function() { 'use strict'; var vis = document.querySelector('.vis:not(select)'), target = document.getElementById(this.value); if (vis !== null) { vis.className = 'content inv'; } if (target !== null) { target.className = 'content vis'; } }); 

 p { font-size: 2.5vw; font-family: arial; } select { width: auto; margin: 0; font-size: 2.5vw; font-family: arial; } .inv { display: none; } 

 <select id="target"> <option value="">System</option> <option value="trad">Traditional</option> <option value="simp">Simplfit</option> <!--Need closing tag here--> </select> <select id="trad" class="inv"> <option value="">Width</option> <option value="content1">400</option> <option value="content2">600</option> <option value="content3">800</option> <option value="content4">1000</option> <option value="content5">1210</option> <!--Need closing tag here--> </select> <select id="simp" class="inv"> <option value="">Width</option> <option value="content6">400</option> <option value="content7">600</option> <option value="content8">800</option> <option value="content9">1000</option> <option value="content10">1210</option> <!--Need closing tag here--> </select> <p id="content1" class="content inv">Content 1</p> <p id="content2" class="content inv">Content 2</p> <p id="content3" class="content inv">Content 3</p> <p id="content4" class="content inv">Content 4</p> <p id="content5" class="content inv">Content 5</p> <p id="content6" class="content inv">Content 6</p> <p id="content7" class="content inv">Content 7</p> <p id="content8" class="content inv">Content 8</p> <p id="content9" class="content inv">Content 9</p> <p id="content10" class="content inv">Content 10</p> 

Answer 2

 document.getElementById('target').addEventListener('change', function() { 'use strict'; var vis = document.querySelector('select.vis'), target = document.getElementById(this.value), ct = document.querySelector('.content.vis'); if (vis !== null) { vis.className = 'inv'; } if (target !== null) { target.className = 'vis'; } if (ct != null) { ct.className = 'content inv'; } }); document.getElementById('trad').addEventListener('change', function() { 'use strict'; var vis = document.querySelector('.vis:not(select)'), target = document.getElementById(this.value); if (vis !== null) { vis.className = 'content inv'; } if (target !== null) { target.className = 'content vis'; } }); document.getElementById('simp').addEventListener('change', function() { 'use strict'; var vis = document.querySelector('.vis:not(select)'), target = document.getElementById(this.value); if (vis !== null) { vis.className = 'content inv'; } if (target !== null) { target.className = 'content vis'; } }); 

 p { font-size: 2.5vw; font-family: arial; } select { width: auto; margin: 0; font-size: 2.5vw; font-family: arial; } .inv { display: none; } 

 <select id="target"> <option value="">System</option> <option value="trad">Traditional</option> <option value="simp">Simplfit</option> <!--Need closing tag here--> </select> <select id="trad" class="inv"> <option value="">Width</option> <option value="content1">400</option> <option value="content2">600</option> <option value="content3">800</option> <option value="content4">1000</option> <option value="content5">1210</option> <!--Need closing tag here--> </select> <select id="simp" class="inv"> <option value="">Width</option> <option value="content6">400</option> <option value="content7">600</option> <option value="content8">800</option> <option value="content9">1000</option> <option value="content10">1210</option> <!--Need closing tag here--> </select> <p id="content1" class="content inv">Content 1</p> <p id="content2" class="content inv">Content 2</p> <p id="content3" class="content inv">Content 3</p> <p id="content4" class="content inv">Content 4</p> <p id="content5" class="content inv">Content 5</p> <p id="content6" class="content inv">Content 6</p> <p id="content7" class="content inv">Content 7</p> <p id="content8" class="content inv">Content 8</p> <p id="content9" class="content inv">Content 9</p> <p id="content10" class="content inv">Content 10</p>