为什么jQuery hide（）/show（）会破坏Chrome中的HTML选择？

我正在编写jira插件，我需要在创建问题屏幕上编辑customfield。我使用jQuery来实现这一点。我对Firefox下Chrome中html选择上使用的jQuery隐藏/显示方法有一个问题。问题是我有3个不同的选择框，这些选项取决于上一个框中选择的选项。我有一个功能，可以在上一个选择列表更改时准备下一个选择列表

function prepareList(code, list) {
    list.children('option').each(function() {
        if(jQuery(this).text() == code || jQuery(this).text() == 'None') {
            jQuery(this).show();
        }
        else {
            jQuery(this).hide();
        }
    });
}

代码是一个字符串，它是jQuery'previous\u select option:selected'。文本 它在许多情况下都可以正常工作，但有时会调整选项列表的大小。更糟糕的是，当下一个列表只有一个选项时，它不会显示。我可以看到它在html代码中有display:inline，但在我点击selecttriangle之后，下拉列表有2个像素。 有趣的是，它在Firefox中工作得非常完美。 IE 8甚至没有隐藏/显示，但它只是IE，所以我可以理解这一点。 Opera 12.16也没有隐藏/显示。 Safari 5.1.7 for Windows也没有隐藏/显示。 问题是我应该用什么方法来实现我的目标？我试过jQuerythis.css'display'、'none/inline'也不起作用

编辑： JSFiddle：

要禁用选项元素，必须将其disabled属性设置为字符串“disabled”，而不是布尔值true

这给了你：

$('#tier3').attr('disabled', 'disabled');

要启用它，请执行以下操作：

$('#tier3').attr('disabled', '');

或

IE和许多其他浏览器的行为安全，不允许对用户隐藏选项。

---

关于IE的其他特殊处理，请阅读。

我找到了解决方案。看起来jQuery的hide/show让Chrome和其他浏览器感到困惑，其中一部分浏览器不允许hide/show。答案是使用jQuery.detach并将列表存储在数组中。如果需要整个列表，只需在HTML选择上使用jQuery.append从数组中重新构建它。这在Chrome、Opera、Safari和Firefox上运行良好。这仍然是个问题

function prepareList(code, list, level) {
    if (level == 1) {
        list.children('option').each(function () {
            if ($(this).text().substring(1, 4) != code && $(this).text() != 'None') {
                $(this).detach();
            }
        });
    } else if (level == 2) {
        list.children('option').each(function () {
            if ($(this).text().substring(1, 5) != code && $(this).text() != 'None') {
                $(this).detach();
            }
        });
    } 
}

function rebuildList(list, a) {
    if(a == 2) {
        for(var i = 0; i < tempt2.length; i++) {
            $(list).append(tempt2[i]);
        }
    }
    else if(a == 3) {
        for(var i = 0; i < tempt3.length; i++) {
            $(list).append(tempt3[i]);
        }
    }
    else {
        rebuildList($('#tier2'), 2);
        rebuildList($('#tier3'), 3);
        $("#tier2").val('none');
        $("#tier3").val('none');
    }
}  

function saveList(list, a) {
    if(a == 2) {
        $(list).children('option').each(function() {
            tempt2.push($(this).detach());
        });
        rebuildList($('#tier2'), 2);
    }
    else if(a == 3) {
        $(list).children('option').each(function() {
            tempt3.push($(this).detach());
        });
        rebuildList($('#tier3'), 3);
    }
}

---

新的JSFIDLE:

您能提供一个复制您的问题的JSFIDLE吗？当然，我花了一段时间准备。在这里，我无法使用ChromeV31i在JSFIDLE上复制您的问题，我只是在每个浏览器上尝试了JSFIDLE上的代码，现在都是一样的。firefox很好，其余的都不起作用。您可以在第一个列表的第四个选项中看到Chrome问题。即使在第三个选项中，第二个选择的下拉列表越来越小，您需要滚动，这对我来说很愚蠢，因为当我们从第一个选择中选择第一个第二个选项时，第二个选择下拉列表更大，您不必滚动。编辑重新加载小提琴，然后在第一个菜单的第四个选项上尝试。是的，我现在明白你在说什么了。我不知道是什么导致了这种奇怪的行为。谢谢你的回答@Bora。你的文章将帮助我使用Opera/IE，但我仍然需要在每个borwser上使用它，禁用的差异并没有改变。另外，它的解决方案是只将选择菜单的内部html保存在变量中，并在隐藏之前-将html放在选择标记中。所以每次你放置html时，它的工作原理就像“取消隐藏”和“分离”一样，让它隐藏一些项目。但奇怪的是，我在一年前做了这个，它工作了，有一天我注意到它不再工作了。我认为这与chrome更新有关，在过去的几个月里，chrome更新经常会引入很多不同的bug。

$('#tier3').removeAttr('disabled');

function prepareList(code, list, level) {
    if (level == 1) {
        list.children('option').each(function () {
            if ($(this).text().substring(1, 4) != code && $(this).text() != 'None') {
                $(this).detach();
            }
        });
    } else if (level == 2) {
        list.children('option').each(function () {
            if ($(this).text().substring(1, 5) != code && $(this).text() != 'None') {
                $(this).detach();
            }
        });
    } 
}

function rebuildList(list, a) {
    if(a == 2) {
        for(var i = 0; i < tempt2.length; i++) {
            $(list).append(tempt2[i]);
        }
    }
    else if(a == 3) {
        for(var i = 0; i < tempt3.length; i++) {
            $(list).append(tempt3[i]);
        }
    }
    else {
        rebuildList($('#tier2'), 2);
        rebuildList($('#tier3'), 3);
        $("#tier2").val('none');
        $("#tier3").val('none');
    }
}  

function saveList(list, a) {
    if(a == 2) {
        $(list).children('option').each(function() {
            tempt2.push($(this).detach());
        });
        rebuildList($('#tier2'), 2);
    }
    else if(a == 3) {
        $(list).children('option').each(function() {
            tempt3.push($(this).detach());
        });
        rebuildList($('#tier3'), 3);
    }
}