O IE6 não altera atributos (id e nome) com a chamada de attr do jQuery - alguma sugestão?

Question

Sugestões além de descartar o IE6, isso é ...Não consigo controlar isso :)

Sinopse rápida do que estou tentando fazer:Eu tenho um formulário com elementos selecionados.Quando o usuário seleciona uma opção específica no select (id type2 no código abaixo), exibo uma estrutura div que contém um novo select.Quero que a nova estrutura div e seus filhos sejam um clone de uma existente (id pdProgramDiv1) porque uso php para preencher o select na div.Depois que o select for clonado, preciso alterar o ID do clone e o nome do div e seu rótulo filho e selecionar porque as informações do formulário estão sendo passadas para o meu script php de envio.Se eles não tiverem IDs exclusivos, embora sejam serializados na string de consulta, o array $_POST em php inclui apenas o último valor de um determinado ID.

Incluí o código que funciona perfeitamente no Firefox suspirar, e não consegue alterar os IDs e nomes no IE6.Este código pode não ser tão conciso quanto alguns;Ainda sou muito novo no jQuery.

$('#type2').change(function() {
    if ($('#type2 option:selected').text() == 'Program Director') {
        $('#pdProgramDiv1').clone().attr({id: 'pdProgramDiv2', name: 'pdProgramDiv2'}).appendTo($('#type2Div'));

        $('#pdProgramDiv2 > #pdProgram1').attr({id: 'pdProgram2', name: 'pdProgram2'});

        $('#pdProgramDiv2 > label').attr('for', 'pdProgram2');
    } else {
        $('#pdProgramDiv2').hide();
    }
}); 

Eu olhei em volta e tentei usar variáveis ​​em vez de encadear e chamadas individuais para attr em vez de usar o objeto literal (ou mapa), mas nada ajuda.Todas as variações funcionam bem no FF, mas nenhuma alegria no IE6.

Este é um problema conhecido ou alguém pode me dizer uma maneira de fazer as mudanças acontecerem?

Se não conseguir fazer isso funcionar, acho que terei que criar todos os elementos e ocultá-los, mas isso não parece tão bom.

Agradecemos antecipadamente como sempre!

ATUALIZAR:RESOLVIDO

Muito obrigado ao pessoal que encontrou o erro dos meus métodos.Queria postar o código que acaba resolvendo o problema.Como eu disse em meu comentário à resposta aceita abaixo, a correção faz todo o sentido.Fiquei um pouco envergonhado por não ter visto, mas às vezes é necessário um novo par de olhos!A única mudança é selecionar o select filho em vez do ID de seleção e remover a atribuição de atributo de nome em div, porque, como mencionado, isso não faz nada.

$('#type2').change(function() {
    if ($('#type2 option:selected').text() == 'Program Director') {
        $('#pdProgramDiv1').clone()
            .attr('id', 'pdProgramDiv2')
            .appendTo($('#type2Div'));

        $('#pdProgramDiv2 > select').attr({
             id: 'pdProgram2', 
             name: 'pdProgram2'});

        $('#pdProgramDiv2 > label').attr('for', 'pdProgram2');
    } else {
        $('#pdProgramDiv2').hide();
    }
}); 

Answer 1

Acho que seu problema está aqui...

$('#type2').change(function() {
    /* snip */
        $('#pdProgramDiv1').clone().attr({id: 'pdProgramDiv2', name: 'pdProgramDiv2'}).appendTo($('#type2Div'));

        $('#pdProgramDiv2 > #pdProgram1').attr({id: 'pdProgram2', name: 'pdProgram2'});
    /* snip */
});

Você está clonando o contêiner, trocando seu ID e inserindo-o novamente na página.Os contêineres estão bem, mas a página agora contém dois elementos com ID #pdProgram1.document.getElementById não vai gostar disso.

Refatore o código para procurar o elemento selecionado por sua tag em vez de por seu ID.

Answer 2

Acredito que você acabou de ter um problema com o IE6, porque ele lida mal com a clonagem de nós, se é que o faz.Falha precisamente ao corrigir o nome e o id dos elementos clonados...

Mais informações aqui.