this is the assumptions:

- 1 input box for height values, 2 radio buttons for meters and feet inches

- if feet inches radio button is enabled the input box will be removed then a 2 drop down menu will be displayed for a feet inches values and vice versa

the problem is this:
- the code below is working in FF, but in IE the values in the drop down is missing..

what is the problem in my code? did i forgot something?

JAVA SCRIPT SRC

function addHeightLbl( flag ){
        var hghtDiv = document.getElementById( "hghtDiv" );
        var ftIncDivChck = document.getElementById("ftInc");
        var mtrDivChck = document.getElementById("meters");
        
        if ( ftIncDivChck == null && flag == true ){
            //remove meters label
            if( hghtDiv.firstChild )
                hghtDiv.removeChild(hghtDiv.firstChild)

            var ftIncDiv = document.createElement( "ftIncDiv" );
            var select = document.createElement("select");
            select.name = "height_ft";
            
            for(var i=3; 7>=i; i++){
                var optionFt = document.createElement("option");
                optionFt.name = "optionFt";
                optionFt.value = i;
                optionFt.text = i + "'";
                select.appendChild(optionFt);
            }
            hghtDiv.appendChild(select);
            
            var selectInch = document.createElement("select");    
            selectInch.name = "height_inches";

            for(var i=0; 11>=i; i++){
                var optionInch = document.createElement("option");
                optionInch.value = i;
                optionInch.text = i + "\"";
                selectInch.appendChild(optionInch);
            }
            hghtDiv.appendChild(selectInch);

            ftIncDiv.setAttribute("id", "ftInc");
            ftIncDiv.innerHTML = "<font size=2> ft-inch(es) &nbsp; &nbsp; </font>";

            hghtDiv.appendChild(ftIncDiv);
        }


        if ( flag == false ){
            //remove ft-inches label & downdown
            while( hghtDiv.firstChild ){
                hghtDiv.removeChild(hghtDiv.firstChild);
            }

            var mtrDiv = document.createElement( "mtrDiv" );
            mtrDiv.setAttribute("id", "meters");
            mtrDiv.innerHTML = "<input type=\"text\" name=\"height_meters\" size=9 value=\"${selectMtrs}\"><font size=2> m </font>";
            hghtDiv.appendChild(mtrDiv);
        }
    }

JSP SRC

<td align="right"><font size=2> Height: </font> </td>
<td ><div id="hghtDiv"></div></td>
<td>
    <input type="radio" name="height_unit"
        c:if test="${ (null eq height_unit) or func:equals( 'ft-in', height_unit ) }">
            checked
        </c:if> 
        value="ft-in"
            onClick="addHeightLbl( true );"
    >
    <font size=2>ft-in</font>&nbsp;
</td>

<td>
    <input type="radio" name="height_unit" 
        c:if test="${ not (null eq height_unit) and func:equals( 'meter/s', height_unit ) }">
            checked
        </c:if>
        
                 value="meter/s" onClick="addHeightLbl( false );" 
        >
                        
    <font size=2>m</font>&nbsp;
</td>

here is the form:

FF Snapshots:




IE Snapshot:

problem solved!

replace this:

for(var i=3; 7>=i; i++){
                var optionFt = document.createElement("option");
                optionFt.name = "optionFt";
                optionFt.value = i;
                optionFt.text = i + "'";
                select.appendChild(optionFt);
}

by this:

for(var i=3; 7>=i; i++){
    var optionFt = document.createElement("option");
    optionValues = document.createTextNode(i);
    optionFt.appendChild(optionValues);
    select.appendChild(optionFt);
}