2 combo boxes

combo boxes selection

by camus

HTML

<form name='cars'>
<select name='brand'></select>
<select name='model'></select>
</form>

JavaScript

var application_model = [
    {
    name: "General motors",
    models: [
        "model1", "model2", "model3"
        ]},
{
    name: "Mercedes",
    models: [
        "model4", "model5", "model6"
        ]},
{
    name: "Fiat",
    models: [
        "model7", "model8", "model9"
        ]}
];

var selectedBrandIndex = 0
var selectedModelIndex = 0

function render() {
    // render the first combo
    $('select[name=brand]').empty();
    $.each(application_model, function(index, object) {
        var selected = "";
        if (index == selectedBrandIndex) {
            selected = "selected";
        }
        console.log(this);
        $('select[name=brand]').append("<option value='" + index + "'   " + selected + ">" + object.name + "</option>");
    })

    // render the second combo
    $('select[name=model]').empty();
    $.each(application_model[selectedBrandIndex].models, function(index, object) {
        var selected = "";
        if (index == selectedModelIndex) {
            selected = "selected";
        }
        console.log(this);
        $('select[name=model]').append("<option value='" + index + "'   " + selected + ">" + object + "</option>");
    });
}

function main() {
    $("select[name=brand]").bind("change", function(event) {
        console.log(event.currentTarget.value);
        selectedBrandIndex = event.currentTarget.value;
        render();
    });
    render();
}

main();