Asp.net MVC5 jquery to return last value in list only

See more:

ASP.NET

MVC5

Hello,

I have List of Drives in DropDownList and wanted to display list of Directories by selecting any drive.

List Drive Names:

var drives = Directory.GetLogicalDrives().ToList();
            ViewBag.Drives = new SelectList(drives);

Only Last Alphabetical Folder/Directory is shown even the method returns all.

Please help.

What I have tried:

Method in Controller to List Directories:

public JsonResult GetDirectories(string drive)
       {
           var d = new List<string>();
           foreach (var directories in new DirectoryInfo(drive).GetDirectories())
           {
               d.Add(directories.Name);
           }
           var dr = new SelectList(d.ToList());
           return Json(dr, JsonRequestBehavior.AllowGet);
       }

JQuery in View:

<script type="text/javascript">
    $(document).ready(function(){
        $("#Drives").change(function () {
            var d = $("#Drives").val();
            $.ajax({
                type: "post",
                url: "/Explorer/GetDirectories?drive=" + d,
                data: { drives: $("#Drives").val() },
                data: "json",
                traditional: true,
                success: function (data) {
                    var folders = '';
                    for (var i = 0; i < data.length; i++)
                    {
                        folders = folders + '<li class="list-group-item"> <a href="" class = "fa fa-folder">'+data[i].Text+'</a> </li>';
                    }
                    $('#folders').html(folders); 
                }
            });
        });
    });

</script>