当我向选择添加选项时，选择变得更窄答案

【问题标题】：When I add an option to a select the select gets narrower当我向选择添加选项时，选择变得更窄
【发布时间】：2010-10-07 13:00:39
【问题描述】：

继承了一个应用程序，该应用程序的页面具有调用 javascript 函数 addValueClick() 的链接，当我这样做时会弹出一个对话框，我输入一些文本，然后将文本放入选择框中。每次将新选项添加到选择时，它都会变窄约 5 个像素。我不知道为什么会这样，但它只发生在 IE7 中

这里是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";
    }
}

编辑： HTML，它实际上是 ASP.NET。 listValueChanged() 方法所做的就是调用上面的 updateButtons()。

<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>

【问题讨论】：

仅从 JavaScript 很难分辨 - 您是否在 CSS 中的 <select> 标记上定义了固定宽度？
不，这是别人写的老应用，CSS的方式很少。
您仍然可以尝试向asp:ListBox 添加样式属性并定义静态像素宽度。值得一试。 "style= width: 250px;"

标签： asp.net javascript html

【解决方案1】：

它可能更多地与 html 而非脚本有关。选择包含在什么内容中？基于JS，我觉得这里没有问题。

【讨论】：

它在一个表格里，我把它放在上面了。
页面的html元素是否定义了宽度？尝试为您的表格、行和列定义宽度。而且它的整个列表变小了，不是列表中的项目吗？

【解决方案2】：

我知道通过SelectElement.innerHTML = '...'; fails in IE (bug 274) 添加选项。

但我不知道如何通过 .createElement() 添加选项失败......虽然我并没有过度惊讶。

您可以使用 JavaScript new Option(); 语法来创建它们，我相当肯定它不会失败。

【讨论】：

【解决方案3】：

问题是选项被添加到 Select 我将其更改为以下内容并且它运行良好：

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();
    }
}

【讨论】：