style.visibility='；隐藏的'；在JavaScript中，它不起作用

我有一个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>

主席
院长
官能
工作人员
学生
管理

我试过了。是的，它显示用户选择的内容，但不隐藏上一个

---

你认为我的代码有什么错误？或者必须修改什么？

您对

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;
}

---

如果你坚持改变可视性，那也可以做我的客人，但在我的例子中，这不会有任何区别。（如果你能证明不是这样的话，我很乐意接受纠正）

你对

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;
}

---

如果你坚持改变可视性，那也可以做我的客人，但在我的例子中，这不会有任何区别。（如果你能证明不是这样，我很乐意接受更正）

我认为这不是问题，但是如果你设置

display:none

，根本不需要更改

可见性。那么第一次运行“pagechange（）”时，“prev”不是空的吗？这不会使函数立即退出吗？@nnnnnn是的，但它会占用页面中的一些空间，因为它没有被隐藏。@Harvey是的，但我的观点是“prev”永远不会被设置，对吗。。。哦，等等，我明白了。“嗯，我想影子巫师已经把你掩护住了。”哈维：不，没有触发聚焦。您可以使用console.log使用旧代码来验证这一点。我认为这不是问题所在，但如果您正在设置
display:none
，则根本不需要更改
visibility
。第一次运行“pagechange（）”时，“prev”不是空的吗？这不会使函数立即退出吗？@nnnnnn是的，但它会占用页面中的一些空间，因为它没有被隐藏。@Harvey是的，但我的观点是“prev”永远不会被设置，对吗。。。哦，等等，我明白了。“嗯，我想影子巫师已经把你掩护住了。”哈维：不，没有触发聚焦。您可以使用console.log使用旧代码来验证这一点。