如何处理多选下拉列表 - JQuery.

How to handle multiple select dropdown - JQuery

本文关键字：下拉列表 JQuery 何处理 处理      更新时间：2023-09-26

我将有 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/

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

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

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

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

});

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

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/

以下内容将做你想做的事，

看看更新的小提琴，

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

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

更新的小提琴

$('#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>");
            }
        }
    });
});​
相关文章：