Dependent Selects with Pure JS

Selects dependientes a partir de un JSON object, realizado con solo JAvaScript sin frameworks

HTML

<form>
    <p>
        <select id='select1' onchange='cargarSelect2(this.value);'>
            <option value='0'>Selecciona una opción</option>
        </select>
    </p>
    <p>
        <select id='select2' >
            <option value='0'>Selecciona una opción</option>
        </select>
    </p>
</form>

JavaScript

var libros = {
        "nuevos":[
            {"libro":"civil"},
            {"libro":"familia"},
            {"libro":"protección"}
        ],
        "antiguos":[
            {"libro" : "civil-ant"},
            {"libro" : "familia-ant"}
        ]
    }

    function restablecerSelectBox(id){
        var selectBox = document.getElementById(id);
        while (selectBox.firstChild) {
            selectBox.removeChild(selectBox.firstChild);
        }
        selectBox.options[0] = new Option("Seleccione libro", "0");
    }

    function cargarSelect1(){
        var selectBox = document.getElementById("select1");
        var tipoLibro = Object.keys(libros).length;
        for (var i = 0; i < tipoLibro; i += 1) {
            var option = document.createElement("option");
            option.value = Object.keys(libros)[i];
            option.text = Object.keys(libros)[i];
            selectBox.appendChild(option);
        }
    }

    function cargarSelect2(valorTipo) {
        restablecerSelectBox("select2");

        var currentSelectBox = document.getElementById("select2");

        var glosas = libros[valorTipo];
        if(glosas.length > 0){
            for(var i = 0; i < glosas.length; i += 1){
                var option = document.createElement("option");
                option.value = glosas[i].libro;
                option.text = glosas[i].libro;
                currentSelectBox.appendChild(option)
            }
        }
    }


    window.onload = function (){
        cargarSelect1();
    }