如何处理多个选择下拉列表 – JQuery

我将有3 我想用JSON数组填充它们。

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

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

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

是否可以使用jQuery实现？

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

Answer 1

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

http://jsfiddle.net/yPDGA/

    $(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 += '' + my_json.folders[i].name + ''; } $("#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 += '' + my_json.folders[i].files[j].name + ''; } $("#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 += '' + my_json.folders[i].files[j].item[k].name + ''; } } } $("#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(""+folders[i].name+""); } $('#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(""+$file+""); $('#items').append(""+$item+""); } } }); 

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("" + folders[i].name + "").val(0); } } function updateSelect2() { $(select2).empty(); var files = folders[select1.value].files; for (var j = 0; j < files.length; j++) { $(select2).append("" + files[j].name + "").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("" + items[k].name + "").val(0); } } $(select1).change(updateSelect2); $(select2).change(updateSelect3); updateSelect1(); updateSelect2(); updateSelect3(); 

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

Answer 4

以下将做你想要的，

看看更新的小提琴 ，

 var jsonObject= jQuery.parseJSON( json ); var folders = jsonObject.folders; var curFolderSelection; var curFileSelection; for(var i=0; i< folders.length; i++) { $('#folders').append(""+folders[i].name+""); } $('#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(""+curFileSelection[j].name+""); var items = curFileSelection[j].item; for(var k=0; k< items.length; k++) { $('#items').append(""+items[k].name+""); } } }); 

好的，更新的代码有微小的变化

更新的小提琴

 $('#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("" + curFileSelection[j].name + ""); var items = curFileSelection[j].item; for (var k = 0; k < items.length; k++) { $('#items').append("" + items[k].name + ""); } } }); });​