IE6 no cambia los atributos (ID y nombre) con JQuery ATTT Call - ¿Alguna sugerencia?

Question

Sugerencias de la otra que vertiendo IE6 es decir ... No puedo controlar eso :)

Sinopsis rápida de lo que estoy tratando de hacer: tengo un formulario con elementos seleccionados. Cuando el usuario selecciona una opción específica en la selección (ID Tipo2 en el código a continuación), muestro una estructura DIV que contiene una nueva selección. Quiero que la nueva estructura Div y sus hijos sean un clon de uno existente (ID PDProgramDiv1) porque uso PHP para llenar la selección en el DIV. Una vez que la selección está clonada, necesito cambiar la identificación y el nombre del clon del DIV y su etiqueta infantil y seleccionar porque la información del formulario se pasa a mi script PHP. Si no tienen IDS únicos, aunque se serializan en la cadena de consulta, la matriz $ _post en PHP solo incluye el último valor de una ID dada.

He incluido el código que funciona absolutamente perfectamente en Firefox suspiro, y no cambia las ID y los nombres en IE6. Este código puede no ser tan conciso como algunos; Todavía soy bastante nuevo en 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();
    }
}); 

He mirado a su alrededor e intenté usar variables en lugar de encadenar, y llamadas individuales a ATTR en lugar de usar el objeto literal (o mapa), pero nada ayuda. Todas las variaciones funcionan bien en FF, pero no hay alegría en IE6.

¿Es este un problema conocido, o alguien puede decirme una forma de hacer que los cambios sucedan?

Si no puedo hacer que esto funcione, supongo que tendré que crear todos los elementos y ocultarlos, pero eso no parece tan bueno.

¡Gracias de antemano, como siempre!

Actualización: resuelto

Muchas gracias a la gente que encontró el error de mis caminos. Quería publicar el código que terminó resolviendo el problema. Como dije en mi comentario a la respuesta aceptada a continuación, la solución tiene mucho sentido. Un poco de embarazo no lo vi, ¡pero a veces se necesita un par de ojos frescos! El único cambio es seleccionar la selección del niño en lugar de la ID de selección, y eliminar la asignación de ATTR de nombre en DIV, porque como se mencionó, no hace 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

Creo que tu problema está aquí ...

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

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

Estás clonando el contenedor, cambiando su ID e insertándolo nuevamente en la página. Los contenedores están bien, pero la página ahora cotnains dos elementos id'd #pdprogram1. document.getElementByid no le va a gustar eso.

Refactorizar el código para buscar el elemento Seleccionar por su etiqueta en lugar de por su ID.

Answer 2

Creo que te acabas de bloquear en un problema con IE6, porque maneja mal la clonación del nodo, si es que lo hace. Falla precisamente en arreglar el nombre y la identificación de los elementos clonados ...

Más información aquí.