When I add an option to a select the select gets narrower.

Question

Inherited an app with a page that has a link that calls the javascript function addValueClick(), when I do this a dialog box pops up, I type in some text, and then the text gets put in the select box. Every time a new option is added to the select it gets about 5 pixels narrower. I can't figure out why this is happening, but it only happens in IE7

Here is the javascript:

function addValueClick()
{
    var newValue = prompt("Please enter a new value.","");
    if (newValue != null && newValue != "")
    {
     var lst = document.getElementById("lstValues");
     var opt = document.createElement("option");
     opt.setAttribute("selected", "true");
     opt.appendChild(document.createTextNode(newValue));
     lst.appendChild(opt);
     updateBtns();
     copyValues();
    }
}

function copyValues()
{
    var frm = document.forms[0];
    var lst = frm.elements["lstValues"];
    var hid = frm.elements["hidValues"];
    var xml = "<root>";
    for (var i = 0; i < lst.options.length; i++)
    {
     xml += "<value seq_num=\"" + (i + 1) + "\">" +
       lst.options[i].text + "</value>";
    }
    xml += "</root>";
    hid.value = xml;
}

function updateBtns()
{
    var lst = document.getElementById("lstValues");
    var iSelected = lst.selectedIndex;
    var lnkEdit = document.getElementById("lnkEditValue");
    var lnkDelete = document.getElementById("lnkDeleteValue");
    var lnkUp = document.getElementById("lnkValueUp");
    var lnkDown = document.getElementById("lnkValueDown");
    if (iSelected == -1)
    {
     lnkEdit.style.visibility = "hidden";
     lnkDelete.style.visibility = "hidden";
     lnkUp.style.visibility = "hidden";
     lnkDown.style.visibility = "hidden";
    }
    else
    {
     lnkEdit.style.visibility = "visible";
     lnkDelete.style.visibility = "visible";

     if (iSelected == 0)
      lnkUp.style.visibility = "hidden";
     else
      lnkUp.style.visibility = "visible";

     if (iSelected == lst.options.length - 1)
      lnkDown.style.visibility = "hidden";
     else
      lnkDown.style.visibility = "visible";
    }
}

EDIT: The HTML, it's actually ASP.NET. All the listValueChanged() method does is call updateButtons() above.

<tr>
    <TD class=body vAlign=top noWrap align=right><b>Values:</TD>
    <TD class=body vAlign=top noWrap align=left><asp:ListBox id="lstValues" runat="server" onchange="lstValuesChange();" Rows="9" onselectedindexchanged="lstValues_SelectedIndexChanged"></asp:ListBox></TD>
    <TD class=body vAlign=top noWrap align=left>
     <TABLE id="Table2" cellSpacing="2" cellPadding="2" border="0">
      <TR>
       <TD noWrap>
        <asp:HyperLink id="lnkAddValue" runat="server" NavigateUrl="javascript:addValueClick();">Add</asp:HyperLink></TD>
      </TR>
      <TR>
       <TD noWrap>
        <asp:HyperLink id="lnkEditValue" runat="server" NavigateUrl="javascript:editValueClick();">Edit</asp:HyperLink></TD>
      </TR>
      <TR>
       <TD noWrap>
        <asp:HyperLink id="lnkDeleteValue" runat="server" NavigateUrl="javascript:deleteValueClick();">Delete</asp:HyperLink></TD>
      </TR>
      <TR>
       <TD noWrap>&nbsp;</TD>
      </TR>
      <TR>
       <TD noWrap>
        <asp:HyperLink id="lnkValueUp" runat="server" NavigateUrl="javascript:valueUpClick();">Up</asp:HyperLink></TD>
      </TR>
      <TR>
       <TD noWrap>
        <asp:HyperLink id="lnkValueDown" runat="server" NavigateUrl="javascript:valueDownClick();">Down</asp:HyperLink></TD>
      </TR>
     </TABLE>
    </TD>
</TR>

Answer 1

It may have more to do with the html than the script. What is the select contained in? Based on the JS, I don't think there are any problems here.

Answer 2

I know that adding options via SelectElement.innerHTML = '...'; fails in IE (bug 274).

But I don't know about adding options via .createElement() failing... although I'm not overly surprised.

You can use the JavaScript new Option(); syntax to create them, I'm fairly certain that works without failure.

Answer 3

The issue was where the Option was being added to the Select I changed it to the following and it works perfectly:

function addValueClick()
{
    var newValue = prompt("Please enter a new value.","");
    if (newValue != null && newValue != "")
    {
     var lst = document.getElementById("lstValues");
     var opt = document.createElement("option");
     opt.text = newValue;
     opt.value = newValue;
     try {
      lst.add(opt, null); // real browsers
     }
     catch (ex) {
      lst.add(opt); // IE
     }

     updateBtns();
     copyValues();
    }
}