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

如果你坚持改变可见性以及我的访客，但它不会有任何区别，因此在我的例子中删除。（如果你能证明不然我会很高兴得到纠正）

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

1 个答案: