Javascript - Second Drop-down Menu Disappears After Selection? -

i have multiple drop down menus correlate each other. first selection reveals second menu (one of two), in turn reveals content (menu-ception!). however, when finish process second menu disappears, remain open easy access.

i want stick plain javascript moment, no jquery solutions please.

i new coding go easy haha. 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>

the problem way fetching visible element trad , simp handlers.

since fetching .vis element queryselector return current select element because having vis class instead of 1 of content<\d> element, fine tuning selector should fix 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>