即使 selected="" IE9 也显示选中的项目

Question

我有一系列下拉列表，让用户可以从同一个可用选项的总列表中 select 多个项目。

每个下拉列表都包含相同的基本列表，但如果某个项目是 selected，则该选项将不会出现在其他列表中。页面加载了其中的一个或多个 selected.

可以删除下拉菜单。发生这种情况时，selected 选项会添加到其他列表，以便可用。

我编写了 jQuery 代码来删除下拉菜单，从该选项中删除 "selected = 'selected'" 值，获取之前 selected 的值，并将其添加到其他列表。除 IE9 外一切正常 - 它挂在 "selected" 位上并重置所有下拉菜单以将先前删除的项目作为 selected 选项。

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

这是一个 fiddle：https://jsfiddle.net/wicker95/g2mdqg4v/

警报是为了证明附加到其他列表的值。

我知道有几个 ID 在标签上被多次使用，因为...原因。

感谢任何帮助。

Answer 1

在你的 jsfiddle JS 代码的第 4 行试试这个：

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

.prop() 是你需要设置的而不是 .removeAttr()

您也可以.attr('selected', null)删除属性

Answer 2

一位同事建议进行此修改，该修改有效：

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

在上下文中：

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

即使 selected="" IE9 也显示选中的项目

IE9 displaying selected items even when selected=""

html

javascript

jquery

internet-explorer-9