How to select of hidden selectElement

focusselect2.html

<select style="width:100px;opacity:0.01;top10px;left10px;position:absolute;z-index:10"> 
<option value=home>home</option> 
<option value=about>about</option> 
<option value=etc>etc</option> 
</select> 
 
<ul style="padding:0px;margin:0px;top:10px;left:10px;position:absolute;"> 
<li class="home current">home</li> 
<li class="about" style="display:none;">about</li> 
<li class="etc" style="display:none;">etc</li> 
</ul> 
 
<script> 
var select = document.querySelector("select")
select.addEventListener("change", function(e){
    var class = e.target.children[e.target.selectedIndex].value;
    var target = document.querySelector("." + class);
    var current = document.querySelector(".current");
    if(current){
        current.style.display = "none";
        current.classList.remove("current");
    }
    target.style.display = "";
    target.classList.add("current");
});