Question

How could I populate a second select element? I’ve figured out how to do the first one. But how could I do the same for the second depending on which “Make” is selected? I’ve tried to talk myself through it while taking small steps but I’m thinking this may be too advanced for me.

var cars = '{"USED":[{"name":"Acura","value":"20001","models":[{"name":"CL","value":"20773"},{"name":"ILX","value":"47843"},{"name":"ILX Hybrid","value":"48964"},{"name":"Integra","value":"21266"},{"name":"Legend","value":"21380"},{"name":"MDX","value":"21422"},{"name":"NSX","value":"21685"},{"name":"RDX","value":"21831"},{"name":"RL","value":"21782"},{"name":"RSX","value":"21784"},{"name":"SLX","value":"21879"},{"name":"TL","value":"22237"},{"name":"TSX","value":"22248"},{"name":"Vigor","value":"22362"},{"name":"ZDX","value":"32888"}]},{"name":"Alfa Romeo","value":"20047","models":[{"name":"164","value":"20325"},{"name":"8c Competizione","value":"34963"},{"name":"Spider","value":"22172"}]}';
var carobj = eval ("(" + cars + ")");
var select = document.getElementsByTagName('select')[0];

//print array elements out
for (var i = 0; i < carobj.USED.length; i++) {
    var d = carobj.USED[i];
    select.options.add(new Option(d.name, i))
};

Answer 1

If I read your question right, you want to populate a second select with the models for the make in the first select. See below for a purely JS approach (with jsfiddle). If possible, I would recommend looking into jQuery, since I would prefer a jQuery solution.

http://jsfiddle.net/m5U8r/1/

var carobj;

window.onload = function () {
    var cars = '{"USED":[{"name":"Acura","value":"20001","models":[{"name":"CL","value":"20773"},{"name":"ILX","value":"47843"},{"name":"ILX Hybrid","value":"48964"},{"name":"Integra","value":"21266"},{"name":"Legend","value":"21380"},{"name":"MDX","value":"21422"},{"name":"NSX","value":"21685"},{"name":"RDX","value":"21831"},{"name":"RL","value":"21782"},{"name":"RSX","value":"21784"},{"name":"SLX","value":"21879"},{"name":"TL","value":"22237"},{"name":"TSX","value":"22248"},{"name":"Vigor","value":"22362"},{"name":"ZDX","value":"32888"}]},{"name":"Alfa Romeo","value":"20047","models":[{"name":"164","value":"20325"},{"name":"8c Competizione","value":"34963"},    {"name":"Spider","value":"22172"}]}]}';

    carobj = eval ("(" + cars + ")");
    var makes = document.getElementById('make');

    for (var i = 0; i < carobj.USED.length; i++) {
        var d = carobj.USED[i];
        makes.options.add(new Option(d.name, i));
    }

    makes.onchange = getModels;
    getModels();
}

// add models based on make
function getModels () {
    var makes = document.getElementById('make');
    var make = makes.options[makes.selectedIndex].text;
    for (var i = 0; i < carobj.USED.length; i++) {
        if (carobj.USED[i].name == make) {
            var models = document.getElementById('model');
            models.options.length = 0;
            for (var j= 0; j < carobj.USED[i].models.length; j++) {
                var model = carobj.USED[i].models[j];                
                models.options.add(new Option(model.name, j));
            }
            break;            
        }
    }
}

I would also recommend looking into safer JSON parsing. There is a security risk in using eval if it runs on any user input. You could look into JSON.org and their json2.js. Or if you want to use jQuery: parseJSON. Below is the jQuery version:

jQuery.parseJSON(jsonString);

JSON parsing tips from: Safely turning a JSON string into an object.