IE9 displaying selected items even when selected=""

Question

I have a series of drop downs that let the user select multiple items from the same overall list of available options.

Each drop down contains the same basic list, but if an item is selected, that option will not appear in the other lists. The page loads with one or more of these selected.

The drop downs can be removed. When this happens, the selected option is added to the other lists so that it is available.

I've code jQuery code to remove a drop down, remove the "selected = 'selected'" value from that option, take the value that was previously selected, and add it to the other lists. It all works fine except for IE9- it hangs onto the "selected" bit and resets all the drop downs to have the previously removed item as the selected option.

$(".removestccode").click(function () {
    var $ddl = $(this).parents(".stcCodeLi").find("#ddlSTCCode");
    $ddl = $(this).prev();
    var $liPrev = $ddl.find("option:selected").removeAttr("selected");
    alert($liPrev[0].outerHTML);

    var ddls = $('.ddlSTCCode').not($ddl);
    for (var i = 0; i < ddls.length; i++) {
        var d = ddls[i];
        $(d).append($liPrev[0].outerHTML);
        //$(d).find("option").tsort();
    }

    if ($("#ulSTCCodes li").length > 1) {
        $(this).parents(".stcCodeLi").remove();
    }
    return false;
});

Here's a fiddle: https://jsfiddle.net/wicker95/g2mdqg4v/

The alert is there to demonstrate the value being appended to the other lists.

I know there are a couple of id's are being used more than once on the tag, because... reasons.

Any help is appreciated.

Answer 1

A co-worker suggested this modification, which worked:

$(d).append($liPrev[0].outerHTML.replace('selected=""', ''));

In context:

$(".removestccode").click(function () {
    var $ddl = $(this).parents(".stcCodeLi").find(".ddlSTCCode");
    $ddl = $(this).prev();
    var $liPrev = $ddl.find("option:selected").removeAttr("selected");

    var ddls = $('.ddlSTCCode').not($ddl);
    for (var i = 0; i < ddls.length; i++) {
        var d = ddls[i];
        $(d).append($liPrev[0].outerHTML.replace('selected=""', ''));
        //$(d).append($liPrev[0].outerHTML);
        //$(d).find("option").tsort();
    }

    if ($("#ulSTCCodes li").length > 1) {
        $(this).parents(".stcCodeLi").remove();
    }
    return false;
});

Answer 2

Try this on line 4 of your jsfiddle JS code:

var $liPrev = $ddl.find("option:selected").prop("selected", false);

.prop() is what what you need to set instead of .removeAttr()

You can also do .attr('selected', null) to remove the attribute