How to Add options to <SELECT>, in IE Windows Mobile 5

Question

Trying to programmatically add options to a SELECT drop down in IE Windows Mobile.

Because this is IE Windows Mobile 5, most solutions involving getElementID do not function, so I have had to resort to more plain vanilla HTML /Java script, the example below works fine in IE 6 and FF , but fails with "Object doesn't support this property or method" in Windows Mobile 5

function insertBarcodes()
{
val = document.form1.barcode.value ;
i = document.form1.blist.length;
myNewOption = new Option(val , val ); 
document.form1.blist.options[document.form1.blist.length] =myNewOption ; 
 }
 updateCount();

}

Any ideas?

Furculum

Answer 1

Found the answer here:

First I looked at the official reference source here: http://msdn.microsoft.com/en-us/library/bb159677.aspx

I noted that there is an add method for the selectObj, so I tried it and it worked..

here's the working code,

function AddSelectOption(selectObj, text, value, isSelected){
  if(selectObj != null && selectObj.options != null){
    var newOpt = new Option('Hello','Hello'); //create the option object
    selectObj.add(newOpt); //it's the .add(option) method
  }
}

Thanks to all

Furculum

Answer 2

There are 4 ways (that I know of) to set the options... (hopefully one of them works for you (let us know which))

//option 1
var newOpt = document.createElement('option');
newOpt.innerText = 'Hello';
mySelectObject.appendChild(newOpt);

//option 2
mySelectObject.innerHTML = '<option>Hello</option>';
//KNOWN TO FAIL IN IE6,7,8 (see url below)

//option 3
mySelectObject.outerHTML = '<select><option>Hello</option></select>'; //IE Only

//option 4
var newOpt = new Option('Hello','Hello');
mySelectObject.options[index] = newOpt;

IE bug with setting the .innerHTML

Whinstone

Sadly, non worked, the closest was : //option 2 mySelectObject.innerHTML = '<option>Hello</option>'; It added a blank to the drop down, every other option threw an exception. I have had now luck with this, to think a simple thing like adding to a drop down doesn't work.. – Furculum

There is a rumor that the innerHTML (option #2) will work, if passed a dummy wrapper node... e.g. mySelectObject.innerHTML = '<div><option>Hello</option><option>World</option></div>'; but I don't have a device to test on. – Whinstone

Answer 3

From steven harman's blog:

function AddSelectOption(selectObj, text, value, isSelected) 
{
    if (selectObj != null && selectObj.options != null)
    {
        selectObj.options[selectObj.options.length] = 
            new Option(text, value, false, isSelected);
    }
}

So your code would become;

function insertBarcodes()
{
    val = document.form1.barcode.value ;
    AddSelectOption( document.form1.blist, val, val, false );
}

The site states that the author ran into the exact issue you mentioned. The author admits that he doesn't know WHY a four-parameter Option object works, only that it does.

Betancourt