Rellenar un SELECT, dependiendo de otro SELECT

[crash_rpm]

Tengo un formulario en el cual hay dos SELECT, en uno se selecciona la categoria y depende la categoria seleccionada, en el otro select saldran las subcategorias.

Funciona perfectamente el problema que tengo es: cuando seleccionas una categoria que tiene 10 subcategorias las muestra bien, pero si te arrepientes y seleccionas otra categoria que tiene menos subcategorias (6 por ejemplo), pues se muestran esas 6 y se muestran las ultimas 4 de la anterior categoria seleccionada.
En fin funciona bien, pero queda feo que muestre subcategorias que no corresponden.

El codigo es este:

Código PHP:

  <script type="text/javascript">
            var sec = 0;
            function actualizarSec(sec)
            {
                for(j = 1 ; j < vSector[sec].length  ; j++)
                {
                    opt = new Option(vSector[sec][j],j);
                    mySelect = document.getElementById('listaSubsectores');
                    mySelect.options[j] = opt;
                }
           }
        </script> 
  

[maycolalvarez]

lamentablemente como lo haces no funciona en ciertos navegadores (en teoría deben, pero en la practica falla), así corrijas los option extra que lo único que tendrías que hacer es vaciar el select en cuestión.

la forma de hacerlo 100% crossbrowser es "construir" el html del <select> en una variable y usar innerHTML para re-generarlo desde 0, si intentas esa forma, concatenando una string en JS resuelves ambos problemas

te parecerá una solución chapuza, poco elegante, pero es la que funciona, nos guste o no

[ocp001a]

Pues yo uso una forma que me ha funcionado en diversos navegadores:

Código Javascript:

<script type="text/javascript"> 
            var sec = 0; 
            mySelect = document.getElementById('listaSubsectores'); 
            mySelect.length=0;//eliminamos las opciones del select
            function actualizarSec(sec)  { 
                for(j = 1 ; j < vSector[sec].length  ; j++) {
                    mySelect.length++;//aumentamos una opcion
                    mySelect.options[j-1].value=vSector[sec][j];//asignamos el valor
                    mySelect.options[j-1].text=vSector[sec][j];//asignamos el texto
                } 
           } 
</script>
 

[crash_rpm]

Gracias a los dos de veras.

He sacado el document.getElementById('listaSubsectores'); antes del for y he añadido a continuacion el borrado de opciones, y listo. Funciona en explorer, chrome y firefox.

Código PHP:

  <script type="text/javascript">
            var sec = 0;
            function actualizarSec(sec)
            {
                mySelect = document.getElementById('listaSubsectores');
                mySelect.length=0;//eliminamos las opciones del select
                for(j = 1 ; j < vSector[sec].length  ; j++)
                {
                    opt = new Option(vSector[sec][j],j);
                    mySelect.options[j] = opt;
                }
           }
        </script>