Question

I have a listbox that users can add/remove from. To add, there’s a text box and an add button which prepends the text to the top of the list if it isn’t present already. Using jQuery to hook up the events and do the list prepending.

The html for the listbox and buttons:

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

And the related 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"); });
});

This all works fine in Chrome and Firefox, but IE9 doesn’t cooperate. The listbox renders as an empty rectangle (while in Chrome it obeys my min-width styling) and clicking add has no effect. Note that when I wrote this, I knew little about javascript and even less about jQuery, so everything was pieced together with what I could learn from the Google. If there is a more correct way to go about this, I’m open to it.

Answer 1

Try using bind instead of the click shortcut. I have had a similar issue with IE9 and the change event shortcut.

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

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