populate select element based on json

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))
};

Is what you want populating just the second option with a specified value or all options with corresponding values ? — Erdinç Çorbacı, Nov 11 '12 at 02:09
I'm sorry I didn't see this response. I was hoping to populate the all the values for that specific make. — Kelbizzle, Nov 11 '12 at 04:16

score 0 · Accepted Answer · edited May 23 '17 at 11:43

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.

Thank you for this answer this is what I was looking for. How would a jQuery solution differ? — Kelbizzle, Nov 11 '12 at 04:07
@Kelbizzle - Good to hear. Honestly jQuery isn't necessary, just I typically use it by default. It makes writing code for interacting with the DOM much quicker in my opinion. The main update I would consider (jQuery or not) is safer JSON parsing. I updated my answer with some info. — dyersituations, Nov 11 '12 at 04:34
Thanks for the tips. Self learning is difficult when the material doesn't use the best practices. — Kelbizzle, Nov 11 '12 at 05:00

populate select element based on json

1 Answers1