为什么jQuery hide()/ show()破坏HTML中的HTML选择？

Question

我正在编写jira-plugin,我需要在创建问题屏幕上编辑customfield.我使用jQuery来做到这一点.我在Chrome浏览器中使用html选项时使用的jQuery hide/show方法存在问题(在Firefox下运行良好).问题是我有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();
        }
    });
}

code是一个字符串,它是jQuery('#previous_select option:selected').text()它在许多情况下工作正常但有时它会调整选项列表的大小.更糟糕的是,当下一个列表只有一个选项时,它不会显示.我可以看到它有显示:在html代码中内联,但在我点击选择三角形后,下拉列表就像2 px.

有趣的是,它在Firefox中完美运行.
IE 8甚至没有隐藏/显示,但它只是IE,所以我可以理解这一点.
Opera 12.16也没有隐藏/显示.用于Windows的
Safari 5.1.7也没有隐藏/显示.

问题是我应该使用哪些方法来实现我的目标？我也尝试了jQuery(this).css('display','none/inline'),它也不起作用.

编辑:JSFiddle:jsfiddle.net/7KRLE/

Answer 1

我找到了解决方案。看起来 jQuery hide/show 混淆了 Chrome 和其他浏览器（其中部分浏览器不允许 hide/show）。答案是使用jQuery.detach()并将列表存储在数组中。如果您想要整个列表，您只需要在 HTML 选择上使用jQuery.append()从数组中重建它。这在 Chrome、Opera、Safari 和 Firefox 上运行良好。IE还是有问题。

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);
    }
}

新的 JSFiddle：jsFiddle