Javascript中奇怪的下拉菜单问题

Question

我需要翻译一个关于下拉菜单的奇怪问题。

我有一个

company.prototype.buildTable=function(){
  var thisObj=this;

  tableTD = createElement('td');
  tableTD.onclick=function(){thisObj.edit(this);}
  this.table.appendChild(tableTD);  //append td to the table

  // more td

}

company.prototype.edit = function(thisRow) {
  $thisRow=$(thisRow);
  var menu=document.createElement('select');
      menu.className='menu';

   //employees is an array containing employee info

   for(var i=0; i<employees.length; i++){

           var option=document.createElement('option');
               option.className='option';
               option.innerHTML=employees[i].name;
               option.value=employees[i].email;

            menu.appendChild(option);
         }

   $thisRow.append(selectMenu);
}

我可以看到一个下拉菜单在我的td中。然而，当我点击菜单时，我必须按住鼠标来保持选项菜单打开，否则选项菜单将关闭。即使我按住鼠标并选择一个选项，下拉菜单的值也不会改变（它仍然显示在选择菜单中的第一个选项）。我希望我能够清楚地解释我的问题。

有人可以帮我解决这个奇怪的问题吗？

- FlyingCat

---

问题出在追加 OPTION（它们是否成功追加？）还是使用 SELECT 上？ - feeela

Answer 1

据我所知，在将选项追加为DOM元素时，存在一些奇怪的跨浏览器问题。 添加选项的首选方法只是：

menu.options[i] = new Option(employees[i].name, employees[i].email);

编辑:

不要在选择器上使用appendChild和不要在选择器元素上使用innerHTML。简而言之：HTMLSelectElement是特殊的，在IE中有一些怪癖。

- kendsnyder

---

你有这个事实的任何来源吗？ - feeela