拖放xml文件以填充级联下拉列表，然后将部分添加到表单

Question

我正在尝试创建一个可拖动的区域，有人可以删除多个xml文件。 删除xml文件后，我有2个下拉列表框，我想从xml文件填充。 xml文件格式可以是：

<Person>
    <Location Place="">
        <Areas>
            <Area Name="" />
            <Area Name="" />
        </Areas>
    </Location>
</Person>

因此，第一个下拉列表将显示所有Place值的列表，第二个下拉列表将显示在第一个下拉列表中选择的Place值的所有Area Name值的列表。

用户选择地点和区域名称后，可以单击“添加”按钮选择“地点”和“区域名称”的另一个组合。我们如何在视图中添加这样的功能？我想我可以为下拉菜单创建部分视图，如何在单击“添加”按钮时调用此部分视图，以便使用最初删除的文件中的信息填充它。

创建拖放解决方案以读取文件的简便方法是什么。我不太了解jquery / javascript，但我可以看一下指针。

下拉列表中的信息将被回发，因此模型很简单：

public class Person
{
  public string Place { get; set; }
  public string Area { get; set; }
}

更新

我有javascript代码来读取放入框中的文件内容，如下所示：

var personMap = {}

$(document).ready(function () {
    readXmlDnD();
});

function readXmlDnD() {
    var dropArea = document.getElementById("drop-area");
    dropArea.addEventListener("drop", fileDropHandler, false);

    function fileDropHandler(event) {    
        if (!event.dataTransfer || !event.dataTransfer.files) {
            return;
        }

        var fileList = event.dataTransfer.files;

        for (var i = 0; i < fileList.length; i++) {
            var reader = new FileReader();
            reader.onloadend = function (event) { 
                getPersonData(event.target.result); 
            };
            reader.onerror = handleReadError;
            reader.onabort = handleReadAbort;    
            reader.readAsText(fileList[i], 'text/plain');
        }
    }

    function getPersonData(fileContent) {
        var parser = new DOMParser();
        var dom = parser.parseFromString(fileContent, 'text/xml');
        var locations = $('Person > Location', dom);

        locations.each(function (index, location) {
            var areas = []
            $(location).find('Areas > Area').each(function (index, area) {
                areas.push($(area).attr('Name'))
            });

            personMap[$(location).attr('Place')] = areas;
        });
    }
} 

有没有办法从personMap填充下拉菜单，以便对于每个选定的Place，第二个下拉列表中是否填充了相应的区域？ 还需要弄清楚如何在单击“添加”按钮后创建另一组下拉菜单？