Question

我有一个用户可以添加/删除的列表框。要添加，有一个文本框和一个添加按钮，如果文本不存在，则将文本添加到列表顶部。使用jQuery挂钩事件并进行前置列表。

列表框和按钮的html：

<select data-val="true" data-val-required="The BuyingReportRecipients field is required." id="recipients" multiple="multiple" name="BuyingReportRecipients" style="min-width:160px"></select>

<input type="text" id="new-recipients" />
<button id="add-to-recipients">Add</button>
<button id="remove-from-recipients">Remove Selected</button>

相关的javascript：

<script src="/BuyingReport/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
.
.
.

function addListValue(listName) {
    var value = $("#new-" + listName).val();
    var values = [];

    $("#" + listName + " *").each(function () { values.push(this.value) });

    if (values.indexOf(value) == -1) {
        $("#" + listName).prepend("<option selected=\"selected\">" + value + "</option>");
    }

    return false;
}

function removeSelectedListValues(listName) {
    $("#" + listName).find("option:selected").remove();

    return false;
}

$(document).ready(function () {
    $("#add-to-recipients").click(function () { return addListValue("recipients"); });

    $("#remove-from-recipients").click(function () { return removeSelectedListValues("recipients"); });
});

这一切在Chrome和Firefox中运行良好，但IE9不合作。列表框呈现为空矩形（在Chrome中它遵循我的最小宽度样式）并单击添加无效。请注意，当我写这篇文章时，我对javascript知之甚少，甚至对jQuery知之甚少，所以所有内容都与我从谷歌学到的东西拼凑在一起。如果有更正确的方法可以解决这个问题，我愿意接受它。

Answer 1

不确定我是否正确理解了您的问题，但此处似乎存在IE9渲染错误。 IE9不强制选项元素具有相同的父选择宽度，除非父选择根本没有设置宽度，或者具有明确的宽度设置。但是，如果选择中只设置了min-width，问题就出现了。简而言之，您的代码没有任何问题，但您可以通过设置固定的width来解决问题。

你可以在没有任何javascript的情况下实际验证这一点。这是一个易于查看的jsfiddle：http://jsfiddle.net/fordlover49/bpusG/

<select data-val="true" multiple="multiple" style="min-width:160px">
    <option selected>bad</option>
    <option selected>width</option>
</select>
<br>

<select data-val="true" multiple="multiple" >
    <option selected>no</option>
    <option selected>width</option>
</select>
<br>

<select data-val="true" multiple="multiple" style="width:160px">
    <option selected>fixed</option>
    <option selected>width</option>
</select>

Answer 2

尝试使用bind而不是单击快捷方式。我在IE9和更改事件快捷方式方面遇到了类似的问题。

$(document).ready(function () {
    $("#add-to-recipients").bind('click', function () { return addListValue("recipients"); });

    $("#remove-from-recipients")bind('click', function () { return removeSelectedListValues("recipients"); });
});

使用jQuery添加到Listbox不能在IE9中工作

2 个答案: