options not loading in IE

Claus Mygind

The following code loads fine in fireFox but does not load in IE. The list box loads but the options in the list box fail to load

Expand|Select|Wrap|Line Numbers

 
function writeMenu(cPage)

{

/anny8.html" onclick="goNext(\'/ABC/anny8.html\'); return false">An(n)y Geocaching</a>/&nbsp;'

    if (cPage == "anny8")

    {

        document.getElementById("myMenu").innerHTML +=  '<select id="getNextGeoPage" onchange="navigate(this)" name="getNextGeoPage">;'

        document.getElementById("myMenu").innerHTML +=  '</select>&nbsp;/'

    }
 
    document.getElementById("myMenu").innerHTML +=  '<a href="/ABC/index.html" onclick="goNext(\'/ABC/index.html\'); return false">An(n)y Home</a>/&nbsp;'

    document.getElementById("myMenu").innerHTML +=  '<a href="/SEC/testanny4.html" onclick="goNext(\'/SEC/testanny4.html\'); return false">An(n)y Testing</a>/&nbsp;'

    if (cPage == "anny8")

    {

        document.getElementById("getNextGeoPage").innerHTML  = '<option value="" selected="selected">Select from archive</option>'

        document.getElementById("getNextGeoPage").innerHTML += '<optgroup label="2009">'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="21">January</option>'

        document.getElementById("getNextGeoPage").innerHTML += '</optgroup>'

        document.getElementById("getNextGeoPage").innerHTML += '<optgroup label="2008">'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="18">December</option>'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="13">November</option>'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="7">October</option>'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="5">September</option>'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="1">August</option>'

        document.getElementById("getNextGeoPage").innerHTML += '</optgroup>'

    }
 
}

Thinking it might have been a timing problem I also tried this method of loading the options. But it did not work either.

Expand|Select|Wrap|Line Numbers

 
function writeMenu(cPage)

{

/anny8.html" onclick="goNext(\'/ABC/anny8.html\'); return false">An(n)y Geocaching</a>/&nbsp;'

    if (cPage == "anny8")

    {

        document.getElementById("myMenu").innerHTML +=  '<select id="getNextGeoPage" onchange="navigate(this)" name="getNextGeoPage">;'

        document.getElementById("myMenu").innerHTML +=  '</select>&nbsp;/'

    }
 
    document.getElementById("myMenu").innerHTML +=  '<a href="/ABC/index.html" onclick="goNext(\'/ABC/index.html\'); return false">An(n)y Home</a>/&nbsp;'

    document.getElementById("myMenu").innerHTML +=  '<a href="/SEC/testanny4.html" onclick="goNext(\'/SEC/testanny4.html\'); return false">An(n)y Testing</a>/&nbsp;'

    if (cPage == "anny8")

    {

    setTimeout("loadListBox()", 0);

    }

}

function loadListBox()

{

        document.getElementById("getNextGeoPage").innerHTML  = '<option value="" selected="selected">Select from archive</option>'

        document.getElementById("getNextGeoPage").innerHTML += '<optgroup label="2009">'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="21">January</option>'

        document.getElementById("getNextGeoPage").innerHTML += '</optgroup>'

        document.getElementById("getNextGeoPage").innerHTML += '<optgroup label="2008">'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="18">December</option>'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="13">November</option>'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="7">October</option>'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="5">September</option>'

        document.getElementById("getNextGeoPage").innerHTML += '<option value="1">August</option>'

        document.getElementById("getNextGeoPage").innerHTML += '</optgroup>'

}

acoder

It's a bug in IE. Use the DOM methods, e.g. options[] with new Option(), or createElement(), setAttribute(), appendChild(), or the add() method.

Claus Mygind

@acoder
Ok thanks for your reply, but I am stuck again as I was when I previously posted "Dynamic Option Group" thread. A little sample code would be very helpful here.

Here is my partial attempt to load the list box with options. Corrections to this code would be very much appreciated (as is clearly visible in the code I am stuck on line 2):

Expand|Select|Wrap|Line Numbers

     document.getElementById("getNextGeoPage").options[0] = new Option("Select from archive", "", true, true)

    document.getElementById("getNextGeoPage").options[1] = new Option("<optgroup label="2009">'

    document.getElementById("getNextGeoPage").innerHTML += '<option value="21">January</option>'

    document.getElementById("getNextGeoPage").innerHTML += '</optgroup>'

    document.getElementById("getNextGeoPage").innerHTML += '<optgroup label="2008">'

    document.getElementById("getNextGeoPage").innerHTML += '<option value="18">December</option>'

    document.getElementById("getNextGeoPage").innerHTML += '<option value="13">November</option>'

    document.getElementById("getNextGeoPage").innerHTML += '<option value="7">October</option>'

    document.getElementById("getNextGeoPage").innerHTML += '<option value="5">September</option>'

    document.getElementById("getNextGeoPage").innerHTML += '<option value="1">August</option>'

    document.getElementById("getNextGeoPage").innerHTML += '</optgroup>'

acoder

For optgroup, you'd need to create an optgroup element and set its label:

Expand|Select|Wrap|Line Numbers

 var el = document.createElement("optgroup");

el.label = "2009";

and the options would be appended to the optgroup which in turn would be appended to the select element, e.g.

Expand|Select|Wrap|Line Numbers

 var opt = document.createElement('option');

opt.value = "21";

oOption.appendChild(document.createTextNode("January"));

// append the option to the option group

optGrp.appendChild(opt);

// append the option group to the select

sel.appendChild(optGrp);

Claus Mygind

Thank you very much. I was able to complete the list box with your sample code and gain some knowledge in the process. Just one aspect I am not sure about, my first option on the select box is a blank option asking the user to make a selection. While not necessary here, I would like to know how to add it anyway. The default property of "Selected = Selected"

// document.getElementById("getNextGeoPage").innerHTM L = '<option value="" selected="selected">Select from archive</option>'

Since I am creating a object "var opt" and then assigning attributes to the object "opt.value = ..."

Can I then assign the following "opt.selected = "selected"?

Expand|Select|Wrap|Line Numbers

         var opt = document.createElement('option');

        opt.value = "";

        opt.appendChild(document.createTextNode("Select from archive"));

        // append first option to the select

        document.getElementById("getNextGeoPage").appendChild(opt);
 
        //1. create option group for 2009

        var optGrp = document.createElement("optgroup");

        optGrp.label = "2009";
 
        //2. define each options to option group for 2009 

        var opt = document.createElement("option");

        opt.value = "21";

        opt.appendChild( document.createTextNode("January") );
 
        //3. append the option to the option group 2009

        optGrp.appendChild(opt);
 
        //4. append the option group 2009 to the page selector (this is done once for each year)

        document.getElementById("getNextGeoPage").appendChild(optGrp);
 
        //create option group 2008

        var optGrp = document.createElement("optgroup");

        optGrp.label = "2008";
 
        //December

        //add each month as an option (repeat next 4 lines for each option)

        var opt = document.createElement("option");

        opt.value = "18";

        opt.appendChild( document.createTextNode("December") );

        optGrp.appendChild(opt);
 
        //November

        var opt = document.createElement("option");

        opt.value = "13";

        opt.appendChild( document.createTextNode("November") );

        // append the option to the option group

        optGrp.appendChild(opt);
 
        //October

        var opt = document.createElement("option");

        opt.value = "7";

        opt.appendChild( document.createTextNode("October") );

        // append the option to the option group

        optGrp.appendChild(opt);
 
        //September 2008

        var opt = document.createElement("option");

        opt.value = "5";

        opt.appendChild( document.createTextNode("September") );

        // append the option to the option group

        optGrp.appendChild(opt);
 
        //August 2008

        var opt = document.createElement("option");

        opt.value = "1";

        opt.appendChild( document.createTextNode("August") );

        // append the option to the option group

        optGrp.appendChild(opt);
 
        // append the option group to the select (this is done once for each year)

        document.getElementById("getNextGeoPage").appendChild(optGrp);
 
//        document.getElementById("getNextGeoPage").innerHTML  = '<option value="" selected="selected">Select from archive</option>'

acoder

If you want it selected and you're using elem.selected syntax, then you need to set it to true. If you set the attribute, you can set it to "selected":

Expand|Select|Wrap|Line Numbers

 // set property

opt.selected = true;

// alternatively, set the attribute:

opt.setAttribute("selected","selected");

options not loading in IE

Post your reply

Similar topics

Question stats

	Ask Question
Home Questions Articles Browse Topics Latest Top Members FAQ