Question

我正在尝试为移动设备构建一个网站，而且当它添加到选项时，我似乎无法使用onclick工作。我已经阅读了一些帖子，看起来像onclick在移动设备的选项列表中不能工作，但我似乎无法继续工作，这是少数人建议的。我已将我所做的一切添加到jsfiddle页面下面，其中js和html都可以正常工作，但我仍然坚持如何在移动设备上完成这项工作。我有点像JS的初学者，所以我希望我没有完全错过非常明显或已在其他地方解释过。提前感谢您的任何反馈。

http://jsfiddle.net/zwieback99/5nt56/4/

HTML： <select class="select"> <option>Select</option> <option onclick="showhideNarrow('one');">one</option> <option onclick="showhideNarrow('two');">two</option> <option onclick="showhideNarrow('three');">three</option> </select> <div class="visibleNarrow" id="one">number 1</div> <div class="visibleNarrow" id="two">number 2</div> <div class="visibleNarrow" id="three">number 3</div>

JS function showhideNarrow(id) { if (document.getElementById) { var divid = document.getElementById(id); var divs = document.getElementsByClassName("visibleNarrow"); for (var i = 0; i < divs.length; i++) { divs[i].style.display = "none"; } divid.style.display = "block"; } return false; }

CSS .visibleNarrow { padding-left:20px; ; } .select { max-width:440px; min-width:300px; height:40px; margin-left:20px; color:#a0a0a0; font-size:18pt; padding-left:20px; padding-right:20px; }

Answer 1

这不是你需要编写这样的东西的方式

我很惊讶，点击一个选项可以在任何地方工作

我在内联添加了onchange，但确实应该为页面分配onload

<select class="select" onchange="showhideNarrow(this)">

使用

function showhideNarrow(sel) {
  var id=["","one","two","three"][sel.selectedIndex];
  var divid = document.getElementById(id);
  var divs = document.getElementsByClassName("visibleNarrow");
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
  }
  if (divid) divid.style.display = "block";
}

实际上getElementsByClassName的支持程度低于getElementById所以你可以做到

var divIds = ["","one","two","three"];
function showhideNarrow(sel) {
  var id=divIds[sel.selectedIndex];
  for (var i = 1; i < divIds.length; i++) {
    document.getElementsById(divIds[i]).style.display = id==divIds[i]?"block":"none";
  }
}

选项下拉列表，onclick事件无法在移动设备上运行

1 个答案: