cross browser jquery oculto optgroup

Isso está aqui mais para referência a uma solução feita, apenas para eu voltar para ideias.

O que isso faz é fornecer uma maneira simples de ocultar optgroups em todos os navegadores. O Internet Explorer e o Chrome parecem ter a mesma falha que torna difícil ocultar um optgroup em, por exemplo, um evento de mudança. Aqui está uma solução simples e flexível que deve permitir que você dimensione. Atualmente eu uso isso no meu projeto CHAI HIV.

$.fn.hideOptionGroup = function() {
    $.each($(this),function(i,v){
        var optgroup = $(this);
        var lable= optgroup.attr("label");
        var pname = optgroup.closest("select").attr("name");
        var pindex = $("select").index(optgroup.closest("select"));
        optgroup.attr("data-pname",pname); //oddly you can't set data on an optgroup
        if($("."+lable+"_contaner_"+pindex).length<=0){
            $("body").append("<select style='position:absolute;top:-9999em;left:-9999em;' class='"+lable+"_contaner_"+pindex+"'><select>");
        }
        var hidden = $("."+lable+"_contaner_"+pindex);
        optgroup.children().each(function(){ $(this).removeAttr("selected"); });
        optgroup.appendTo(hidden);
    });
}

$.fn.showOptionGroup = function() {
    $.each($(this),function(i,v){
        var _lable=$(this).attr("label");
        var pname = $(this).data("pname");
        $(this).appendTo($( "select[name='"+pname+"']" ));
    });
}

No meu caso eu usei como

$.each( $('form select.property_selector,form select[name="selected_properties"]') ,function(){
    $(this).find('option').attr("selected",false);
    $(this).find('optgroup').hideOptionGroup();
    var pname = $(this).closest('select').attr("name");
    $('optgroup.'+val+'s[data-pname="'+pname+'"]').showOptionGroup();
});

A maneira como isso funciona é remover o grupo de opções do elemento de seleção pai e $ .appendTo um elemento de seleção marcado e escondido com segurança. Desta forma, vinculamos o novo elemento oculto ao elemento de seleção original sem risco de qualquer variável post perdida e contornamos o problema do navegador cruzado ao ocultar um grupo de opções (optgroup) de um select.

Não estou dizendo que isso é ideal, pois é uma referência, mas o ponto é que uma opção para ocultar um optgroup é removê-lo do dom e colocá-lo em um novo elemento do dom que está auto-oculto. Esta é uma solução segura e testada.

Felicidades