Question

I will have 3 <select multiple="multiple"> and I would like to fill them using a JSON array.

{
"folders": [
    {
        "name": "folderName1",
        "files": [
            {
                "name": "filesName1",
                "item": [
                    {
                        "name": "itemName1"
                    }
                ]
            }
        ]
    },
    {
        "name": "folderName2",
        "files": [
            {
                "name": "fileName2",
                "item": [
                    {
                        "name": "itemName2"
                    }
                ]
            }
        ]
    }
]
}

And I would like to fill the 1st select using the ALL folder – names.

And then filter the content of the other selects using the selected value in the first select box. For example when I select foldername1 in the first select I would like to show only option fileName1 in the second select and itemName1 in the third select;

Is it possible to achieve that using jQuery?

Until now I have the following: http://jsfiddle.net/dvMv9/26/

Answer 1

Here is working code, and a link on fiddle.

http://jsfiddle.net/yPDGA/

<select multiple="multiple" id="sel_1"></select>
<select multiple="multiple" id="sel_2"></select>
<select multiple="multiple" id="sel_3"></select>

$(document).ready(function(){
    var my_json = {
    "folders": [
        {
            "name": "folderName1",
            "files": [
                {
                    "name": "filesName1",
                    "item": [
                        {
                            "name": "itemName1"
                        }
                    ]
                }
            ]
        },
        {
            "name": "folderName2",
            "files": [
                {
                    "name": "fileName2",
                    "item": [
                        {
                            "name": "itemName2"
                        }
                    ]
                }
            ]
        }
    ]
    };

    var i, html = "";
    for (i = 0; i < my_json.folders.length; i += 1) {
        html += '<option value="' + my_json.folders[i].name + '">' + my_json.folders[i].name + '</option>';
    }
    $("#sel_1").html(html);

    $("#sel_1").change(function () {
        var html = "", i, j;
        for (i = 0; i < my_json.folders.length; i += 1) {
            if (my_json.folders[i].name === $(this).attr("value")) {
                for (j = 0; j < my_json.folders[i].files.length; j += 1) {
                    html += '<option value="' + my_json.folders[i].files[j].name + '">' + my_json.folders[i].files[j].name + '</option>';
                }
                $("#sel_2").html(html);
                $("#sel_3").html('');
                return;
            }
        }

    });

    $("#sel_2").change(function () {
        var html = "", i, j, k, sel_1_value = $("#sel_1").attr("value");
        for (i = 0; i < my_json.folders.length; i += 1) {
            if (my_json.folders[i].name === sel_1_value) {
                for (j = 0; j < my_json.folders[i].files.length; j += 1) {
                    if (my_json.folders[i].files[j].name === $(this).attr("value")) {
                        for (k = 0; k < my_json.folders[i].files[j].item.length; k += 1) {
                            html += '<option value="' + my_json.folders[i].files[j].item[k].name + '">' + my_json.folders[i].files[j].item[k].name + '</option>';
                        }
                    }
                }
                $("#sel_3").html(html);
                return;
            }
        }

    });
});