Weird dropdown menu issue in Javascript

Question

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?

Is the issue on appending the `OPTION`s (are they successfully appended?) or is the issue on using the `SELECT`? — feeela, Jan 04 '13 at 20:10

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

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

edited May 23 '17 at 11:56

Community

1
1

answered Jan 04 '13 at 19:57

kendsnyder

764
7
12

Do you have any sources for that fact? – feeela Jan 04 '13 at 20:08

Weird dropdown menu issue in Javascript

1 Answers1