如何处理多个选择下拉列表 - JQuery [英] How to handle multiple select dropdown - JQuery

问题描述

我将有3 < select multiple =multiple> ，我想用JSON数组填充它们。

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"
                    }
                ]
            }
        ]
    }
]
}

我想使用 ALL 文件夹填写第一个选择 - 名称。

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

这是d然后使用第一个选择框中的选定值过滤其他的内容选择。例如，当我在第一个选择中选择 foldername1 时，我想在第二个选择中仅显示选项 fileName1 并且 itemName1 在第三个中选择;

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;

是否可以使用jQuery实现这个目标？

Is it possible to achieve that using jQuery?

到目前为止，我有以下内容： http://jsfiddle.net/dvMv9/26/

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

推荐答案

这是工作代码和链接小提琴。

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

    });
});

这篇关于如何处理多个选择下拉列表 - JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！