style.visibility = 'hidden' в JavaScript не работает

Question

У меня есть код Javascript, который обрабатывает событие onchange и onfocus в моем поле со списком. Таким образом, он отображает только тот, который выбирается пользователем в поле со списком.

У меня есть этот Javascript код:

var prev = ""; 

function pagechange(topage) { 
frompage = prev; 
    var page=document.getElementById('formpage_'+frompage); 
    if (!page) return false; 
    page.style.display='none'; 
    page.style.visibility='hidden'; 

    page=document.getElementById('formpage_'+topage); 
    if (!page) return false; 
    page.style.display='block'; 
    page.style.visibility='visible'; 

    return true; 
} 


function set(){ 
var e = document.getElementById("usertype"); 
var selection = e.options[e.selectedIndex].text; 
pagechange(selection); 
} 


function getPrevious(){ 
var e = document.getElementById("usertype"); 
var selection = e.options[e.selectedIndex].text;  
prev = selection; 

} 

И это один для моего поля со списком:

 <select id="usertype" name="usertype" class="dropdown-select" autofocus="autofocus" onchange="set()" onfocus="getPrevious()" > 
     <option value="1" selected="selected">Chairperson</option> 
     <option value="2">Dean</option> 
     <option value="3">Faculty</option> 
     <option value="4">Staff</option> 
     <option value="5">Student</option> 
     <option value="6">Admin</option> 
     </select> 

Я попробовал. Да, это показывает, что пользователь выбрал, но он не скрывает предыдущий.

Как вы думаете, что случилось в моем коде? или что нужно изменить?

Answer 1

У вас слишком много веры в событие onfocus. В отличие от ожидаемого, это не всегда срабатывает до того, как будет сделан новый выбор. Например (хотя бы в Chrome), если вы просто нажмете стрелку и измените выбор, она не будет запущена. Следовательно, у вас нет предыдущего выбора, чтобы скрыть.

Просто избавься от метода getPrevious() и вместо того, чтобы сохранить предыдущий после показа выбран:

function pagechange(topage) { 
    var page; 
    if (prev.length > 0) { 
     page = document.getElementById('formpage_' + prev); 
     if (page) 
      page.style.display = 'none'; 
    } 

    page = document.getElementById('formpage_' + topage); 
    if (!page) 
     return false; 

    page.style.display = 'block'; 
    prev = topage; 
    return true; 
} 

Live test case.

Если вы настаиваете на изменении видимости, а также быть моим гостем, но в моем примере это не будет иметь никакого значения. (если вы можете доказать иначе, я буду рад встать исправлено)