如何处理多选下拉菜单 - JQuery

Question

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

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

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

然后使用第一个选择框中的选定值过滤另一个selects的内容。例如，当我在第一个选择中选择 foldername1 时，我只想在第二个选择中显示选项 fileName1，在第三个选择中显示 itemName1 select;

是否可以使用 jQuery 来实现？

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

Answer 1

这是工作代码，以及小提琴上的链接。

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

    });
});

Answer 2

这可能是一种方法，但必须实施。无论如何，这是一个开始：

var json = '{"folders":[{"name":"folderName1","files":[{"name":"filesName1","item":[{"name":"itemName1"}]}]},{"name":"folderName2","files":[{"name":"fileName2","item":[{"name":"itemName2"}]}]}]}';

var jsonObject= jQuery.parseJSON( json );

var folders = jsonObject.folders;

for(var i=0; i< folders.length; i++) {
    $('#folders').append("<option>"+folders[i].name+"</option>");
}

$('#folders').on('change', function(){

    $('#files option').remove();
    $('#items option').remove();

    var $this = $(this).val()[0];
    for(k in folders) {
        if(folders[k].name == $this){
            //Here could be other loop
            var $file = folders[k].files[0].name;
            var $item = folders[k].files[0].item[0].name;
            $('#files').append("<option>"+$file+"</option>");
            $('#items').append("<option>"+$item+"</option>");
        }
    }


});

Answer 3

您可以拆分代码并将循环放在不同的函数中。

var json = '{"folders":[{"name":"folderName1","files":[{"name":"filesName1","item":[{"name":"itemName1"}]}]},{"name":"folderName2","files":[{"name":"fileName2","item":[{"name":"itemName2"}]}]}]}';

var jsonObject = jQuery.parseJSON(json);
var folders = jsonObject.folders;

var select1 = document.getElementById("folders");
var select2 = document.getElementById("files");
var select3 = document.getElementById("items");

function updateSelect1() {
    $(select1).empty();
    for (var i = 0; i < folders.length; i++) {
        $(select1).append("<option value='" + i + "'>" + folders[i].name + "</option>").val(0);
    }
}

function updateSelect2() {
     $(select2).empty();
    var files = folders[select1.value].files;
    for (var j = 0; j < files.length; j++) {
        $(select2).append("<option value='" + j + "'>" + files[j].name + "</option>").val(0);
    }
    updateSelect3();
}

function updateSelect3() {
     $(select3).empty();
    var items = folders[select1.value].files[select2.value].item;
    for (var k = 0; k < items.length; k++) {
        $(select3).append("<option value='" + k + "'>" + items[k].name + "</option>").val(0);
    }
}

$(select1).change(updateSelect2);
$(select2).change(updateSelect3);

updateSelect1();
updateSelect2();
updateSelect3();

演示：http://jsfiddle.net/diode/dvMv9/35/

Answer 4

下面会做你想做的，

查看更新后的fiddle，

var jsonObject= jQuery.parseJSON( json );

var folders = jsonObject.folders;
var curFolderSelection;
var curFileSelection;

for(var i=0; i< folders.length; i++) {
    $('#folders').append("<option>"+folders[i].name+"</option>");    
}

$('#folders').on('change', function(){
    curFolderSelection = $(this).val();
    for(var i=0; i< folders.length; i++) {
        if(folders[i].name == curFolderSelection){
            curFileSelection = folders[i].files;
        }                                
    }
    $('#files').html('');
    $('#items').html('');
    for(var j=0; j < curFileSelection.length; j ++) {        
        $('#files').append("<option>"+curFileSelection[j].name+"</option>");
        var items = curFileSelection[j].item;
        for(var k=0; k< items.length; k++) {
            $('#items').append("<option>"+items[k].name+"</option>");
        }            
    }    
});

好的，更新后的代码稍作改动

更新后的fiddle

$('#folders').on('change', function() {
    //alert(this.val);
    $('#files').html('');
    $('#items').html('');
    curFolderSelection = $('#folders option:selected');
    curFolderSelection.each(function() {
        for (var i = 0; i < folders.length; i++) {
            if (folders[i].name == $(this).val()) {
                curFileSelection = folders[i].files;
            }
        }

        for (var j = 0; j < curFileSelection.length; j++) {
            $('#files').append("<option>" + curFileSelection[j].name + "</option>");
            var items = curFileSelection[j].item;
            for (var k = 0; k < items.length; k++) {
                $('#items').append("<option>" + items[k].name + "</option>");
            }
        }
    });
});​