如何處理多個選擇下拉列表 - 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，在第三個select中顯示itemName1;

是否有可能實現使用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

下面將做你想做的，

看看更新的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>"); 
      } 
     } 
    }); 
});​ 

Answer 4

您可以拆分代碼並將循環放入不同的函數中。

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/