Question

我有以下一点代码。我正在尝试根据第一个下拉列表中的选择动态地将下拉选项添加到第二个下拉列表。两者都是通过对从数据库中提取数据的脚本的Ajax调用生成的。这是相关的代码。

 function setSub(doc) {
  // Setup some variables
  var sNode = document.getElementById('4'); // GRAB THE ELEMENT HERE
  var rmiData = doc.getElementById('rmiData').innerHTML;
  var aItems = rmiData.split("|");
  var aVals;
  // Set some background
  sNode.style.background = "#fff";
  // Loop through adding options to the drop down
  for (var x = 0; x < (aItems.length -1); x ++) {
   aVals = aItems[x].split("=");
   // ADD OPTIONS DYNAMICALLY TO SECOND DROP-DOWN HERE
   sNode.options[x+1] = new Option(aVals[1],aVals[0],false,false);
   // PROBLEM HERE: ADD ONCLICK TO THE OPTION WE JUST CREATED
   sNode.options[x+1].onclick = function() { fixDayList(); };
   //sNode.options[x+1].onclick = new Function("fixDayList();");
   //sNode.options[x+1].setAttribute("onclick", "fixDayList();");
   // END PROBLEM LINES
  }
  // Set the length
  sNode.length = x+1;
  // Select the first item in the list
  sNode[0].selected = true;
 }

如果您注意到“//问题此处”行之后的部分，我尝试以三种不同的方式添加onclick事件。所有3在Firefox中都能正常工作。 3中没有一个在IE6或Safari中工作（在IE8上不确定）。有什么建议吗？其余的代码使用了一些古老的学校JavaScript，我从现有的遗留代码片段中复制了它，我只是想在我的版本上添加onclick（最好不要重写大量的代码）。

有关为什么onclick事件不会从Safari和IE中触发的任何想法？

我可以在代码中访问jQuery。所以，如果jQuery在内部修复了这个问题，我可以找出合适的选择器来使用，那就行了。但是，我不确定如何选择这个。我试过了：

$（'＃4'）。options [x + 1] .click（function（）{fixDayList（）;}）;

但是那个选择器很糟糕，我不确定如何选择正确的选择器（我在jQuery方面是绿色的）。

Answer 1

使用类似的东西：

if(window.addEventListener){
   sNode.options[x+1].addEventListener('click', fixDayList, false);
} else if (window.attachEvent){
   sNode.options[x+1].attachEvent('onclick', fixDayList);
} else {
   sNode.options[x+1].onclick = fixDayList;
}

<强>更新：

在Safari中，除非option元素可见且未显示为下拉列表，否则它们永远不会触发click事件。但是，如果您向size=10元素添加select或其他内容，则Safari会触发option元素上的点击事件。

您最好的选择是在change元素上收听select事件，而不是在click上尝试使用options。

IE，Safari，Firefox中的动态OnClick

1 个答案: