javascript - JavaScript 中的 style.visibility ='hidden' 不起作用

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 .

如果您坚持要更改可见性，请成为我的客人，但这不会产生任何影响，因此在我的示例中被删除。 (如果你能证明不是这样，我很乐意接受纠正)