Crear un tercer nivel en un Select anidado

Hola, tengo un Select con dos niveles y quiero crear un tercero, en el que me aparezcan las opciones correspondientes a la opción seleccionada en el segundo nivel, pues funciona bien con la primera opción del primer nivel, pero si pincho en la segunda funciona bien hasta el segundo nivel, pero ya en el tercero no va.

Código Javascript :

/**
 * Funcion que se ejecuta al seleccionar una opcion del primer select
 */
function cargarSelect2(valor)
{
    /**
     * Este array contiene los valores del segundo select
     * Los valores del mismo son:
     *  - hace referencia al value del primer select. Es para saber que valores
     *  mostrar una vez se haya seleccionado una opcion del primer select
     *  - value que se asignará
     *  - texto que se asignará
     */
    var arrayValores=new Array(
        new Array(1,1,"Ford"),
        new Array(1,2,"Seat"),
        new Array(1,3,"Opel"),
        new Array(2,1,"Honda"),
      new Array(2,2,"Yamaha")        
    );
    if(valor==0)
    {
        // desactivamos el segundo select
        document.getElementById("select2").disabled=true;
    }else{
        // eliminamos todos los posibles valores que contenga el select2
        document.getElementById("select2").options.length=0;
        
        // añadimos los nuevos valores al select2
        document.getElementById("select2").options[0]=new Option("Selecciona una opcion", "0");
        for(i=0;i<arrayValores.length;i++)
        {
            // unicamente añadimos las opciones que pertenecen al id seleccionado
            // del primer select
            if(arrayValores[i][0]==valor)
            {
                document.getElementById("select2").options[document.getElementById("select2").options.length]=new Option(arrayValores[i][2], arrayValores[i][1]);
            }
        }        
        // habilitamos el segundo select
        document.getElementById("select2").disabled=false;
    }
}
function cargarSelect3(valor)
{
    /**
     * Este array contiene los valores del tercer select
     * Los valores del mismo son:
     *  - hace referencia al value del primer y del segundo select. Es para saber que valores
     *  mostrar una vez se haya seleccionado una opcion del primer select y del segundo
     *  - value que se asignará
     *  - texto que se asignará
     */      
   var arrayValores=new Array(
        new Array(1,1,1,"Focus"),
        new Array(1,1,2,"Fiesta"),
        new Array(1,1,3,"Mondeo"),
        new Array(1,2,1,"León"),
      new Array(1,2,2,"Ibiza"),
      new Array(1,3,1,"Corsa"), 
      new Array(1,3,2,"Zafira"), 
      new Array(1,3,3,"Astra"),
      new Array(2,1,1,"CBR450"), 
      new Array(2,1,2,"VFR800F"), 
      new Array(2,2,1,"SR400")         
    );
   if(valor==0)
    {
        // desactivamos el tercer select
        document.getElementById("select3").disabled=true;
    }else{
        // eliminamos todos los posibles valores que contenga el select3
        document.getElementById("select3").options.length=0;
        
        // añadimos los nuevos valores al select3
        document.getElementById("select3").options[0]=new Option("Selecciona una opcion", "0");
        for(i=0;i<arrayValores.length;i++)
        {
            // unicamente añadimos las opciones que pertenecen al id seleccionado
            // del segundo select
            if(arrayValores[i][1]==valor)
            {
                document.getElementById("select3").options[document.getElementById("select3").options.length]=new Option(arrayValores[i][3], arrayValores[i][1]);
            }
        }        
        // habilitamos el tercer select
        document.getElementById("select3").disabled=false;
    }
}

Código :

[html]
<form>
    <p>
      <select id='select1' onchange='cargarSelect2(this.value);'>
            <option value='0'>Selecciona una opcion</option>
            <option value='1'>Coches</option>
            <option value='2'>Motos</option>            
        </select>
    </p>
    
    <p>
        <select id='select2' onchange='cargarSelect3(this.value);'>
            <option value='0'>Selecciona una opcion</option>
        </select>
    </p>
        <p>
        <select id='select3'>
            <option value='0'>Selecciona una opcion</option>
        </select>
    </p>
    </form>
[/html]

Tu problema no se entiende que es en si lo que deseas hacer y que es lo que supuestamente no hace.

Favor de utilizar una descripción detallada.

Como un ejemplo vale más que mil palabras, lo he subido al jsfiddle.net/9xvt4jhp/
Ahora te cuento el problema, si pinchas en el primer desplegable y seleccionas coches, en el segundo select puedes seleccionar las distintas marcas disponibles y si seleccionas motos ocurre lo mismo, hasta ahí funciona bien, pero si seleccionas en este select una marca de motos o de coches y luego te vas al tercer desplegable verás que aparecen un batiburrillo de opciones que no tienen nada que ver con la opción, o sea, con la marca seleccionada, por ejemplo si pinchas en Coches>Ford> aparecen también varios modelos de motos, que lógicamente no deberían aparecer, no se si es un problema del código o de configuración del Array
Saludos

Tu problema es que solo estas tomando el ultimo valor
por eso te pone todo el arreglo mal hecho

Cuando hagas el cargar3 debes traer el valor del primero y del segundo para que puedas armar este nuevo.

Es que si tienes el [1,2,"algo"]
y despues el [1,2,3,"otro"]

entonces hay que recuperar el dato anterior y el dato nuevo para buscar.

Como no le entendi a tu Array, te dejo uno con un Object a mi parecer mas legible, si no le entiendes soloa grega datos jejejejej veras que los reconoce asi agregues mas marcas y todo

http://jsfiddle.net/elporfirio/2ea6v35c/

La verdad es que con el Object se ve más claro y funciona perfectamente, pero en el ejemplo que yo te he puesto, el value es el mismo que el text, pero y si es distinto, por ejemplo, si a cada marca le añadimos un código y cada modelo tiene también su código y lógicamente el código sería el value.
01- Ford > 010 - Focus, 011 - Fiesta, etc., etc.

Al Object que tu me has hecho yo le he añadido el código para las marcas y los modelos, échale un vistazo, yo creo que lo he hecho bien, pero en los Object no estoy muy ducho, así que no estoy muy seguro de que esté correcto, porque luego al pasarlo a los select no funcionan bien

Saludos

Código Javascript :

var vehiculos = {
        "autos":[
            {"codigo":"01", "marca":"Ford", "modelos" : [{"codigo":"010", "modelos":"Focus"}, {"codigo":"011", "modelos":"Fiesta"}, {"codigo":"012", "modelos":"Mondeo"}]},         
            {"codigo":"02", "marca":"Seat", "modelos" : [{"codigo":"020", "modelos":"León"}, {"codigo":"021", "modelos":"Ibiza"}]},         
         {"codigo":"03", "marca":"Opel", "modelos" : [{"codigo":"030", "modelos":"Corsa"}, {"codigo":"031", "modelos":"Zafira"}, {"codigo":"032", "modelos":"Astra"}]},           
        ],
        "motos":[
         {"codigo":"04", "marca":"Honda", "modelos" : [{"codigo":"040", "modelos":"CBR450"}, {"codigo":"041", "modelos":"VFR800F"}]},           
         {"codigo":"05", "marca":"Yamaha", "modelos" : [{"codigo":"050", modelos":"SR400"}]},            
        ]
    }

EL objeto que creaste es invalido amigo, es que ammm entendiendo el arreglo podras dominar lo que te puse..

a ver dale una revisada a esto: http://www.json.com/

y trata de jugar con los objectos.. para ver como funciona entra a:

http://jsonviewer.stack.hu/

Y pega tu codigo, por ejemplo pega el que te puse YO en el ejemplo, despues le picas a la pestaña de viewer y veras como se visualiza.

Despues intenta poner el tuyo y veras que no es uno valido, por ello debes de ver los basicos de JSON.

RECOMENDACION: Estudia bien la structura del JSON, pues muchos web services actuales (como Google maps) te regresan la información en esa estructura.

Ya dominandolo, podrás hacer maravillas. NO OLVIDES PRACTICAR.

Ya me parecía que mi código no estaba bien del todo, como te he comentado, en el tema de los Object estoy un poco pez y me lío bastante, así que seguiré tu consejo y estudiaré a fondo la estructura del JSON para saber como funciona.
He hecho lo que me has dicho, entrar en http://jsonviewer.stack.hu/ y he metido tu código pero me sale Invalid JSON Variable y con cualquiera que meta el mensaje que me sale es el mismo, no sé por qué

pedromir:

El código JSON que has pegado no valida porque no debe haber una coma inmediantamente antes de un corchete recto cerrado. En el código tienes dos, la coma que está después de "Astra" y después de "SR400". En este último, la cadena "modelo" no tiene la comilla doble de apertura.