Добавление в список с JQuery не работает в IE9

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, поэтому все было соединено с тем, что я мог узнать из Google. Если есть более правильный способ сделать это, я открыт для этого.

Answer 1

Не уверен, правильно ли я понимаю ваш вопрос, но здесь есть ошибка рендеринга IE9.IE9 не заставляет элементы option иметь одинаковую ширину родительского выбора, если только родительский выбор либо не имеет установленной ширины вообще, либо не имеет явного набора ширины.Однако, когда для выбора установлено только 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

Попробуйте использовать связывание вместо ярлыка клика.У меня была похожая проблема с IE9 и ярлыком события изменения.

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

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