问题描述:

I am having a weird issue regarding the dropdown menu.

I have

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);

}

I can see a dropdown menu in my td. However, when I click the menu, I had to hold my mouse to

keep options open otherwise the options menu will close. Even if I hold my mouse and select one option,

the dropdown menu value wont' change (it still show the first option in the select menu). I hope I explain my issue well.

Can anyone help me with this weird issue? Thanks a lot!

网友答案:

IIRC, there are some weird cross browser issues with appending options as DOM elements. The preferred way to add options is simply:

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

EDIT:

Do not to use appendChild on select and do not use innerHTML on select elements. TL;DR: HTMLSelectElement is special and has quirks in IE

相关阅读:
Top