Question

我正在尝试为选择框构建一个跨浏览器的方式，让用户点击两次相同的选项。由于IE无法识别选项的点击事件，因此您必须使用onchange，但之后再点击相同的两次不会改变它。

我的解决方案是在顶部创建一个额外的选项，通常显示“选择选项...”，但是当选择框未使用时，该选项会更改为所选的选项。这样，看起来用户选择了他们的选项，但实际上选项的选择事件被触发，第一个选项的文本被更改为匹配它，并且第一个选项被选中，以便用户以后可以选择相同的选项两次触发onchange事件。

事情进展顺利，我的代码是/是：

var dropdown = document.createElement("select");

dropdown.onchange = function(){
  this.options[this.selectedIndex].clickevent();
  this.blur();
};

var blank = document.createElement("option");
blank.innerHTML = "Select Option...";
blank.clickevent = function(){
  return;   
}
dropdown.appendChild(blank);

dropdown.onfocus = function(){
  this.childNodes[0].innerHTML = "Select Option...";
}

dropdown.onblur = function(){
  this.childNodes[0].innerHTML = selectedOptText || "Select Option...";
}

这在所有浏览器中都按预期工作。唯一的问题是，在Internet Explorer中，当我单击选择框时，它会将顶部选项的文本聚焦并切换为“选择选项...”，但不会下拉。

我试过了：

使用textContent
使用setTimeout
使用return true
将onfocus设置为空，调用它，然后重新设置
致电onclick
查找如何使用纯JavaScript打开下拉列表，这导致我this answer，这听起来不错，直到我尝试了小提琴并且它不起作用。

真正有趣的唯一尝试是使用setTimeout，在那里我了解到设置innerHTML属性的操作实际上是关闭了选择框。因为我可以打开它，但是在2000秒后文本会改变，它会再次关闭。

我只在Internet Explorer中看到这种行为 - 在Firefox中，一切都运行良好。

更改选项的innerHTML将关闭IE9中的select标记

0 个答案: