如何在mvc中通过ajax绑定动态下拉列表

<select id="dropdown" onchange="getData()">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
</select>
<div id="result"></div>

function getData() {
    var selectedValue = document.getElementById("dropdown").value;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            updateResult(response);
        }
    };
    xhr.open("GET", "/api/data?selectedValue=" + selectedValue, true);
    xhr.send();
}

@RequestMapping(value = "/api/data", method = RequestMethod.GET)
@ResponseBody
public List<Data> getData(@RequestParam("selectedValue") String selectedValue) {
    // 根据selectedValue查询数据库或其他数据源获取数据
    List<Data> data = dataService.getData(selectedValue);
    return data;
}

function updateResult(data) {
    var resultContainer = document.getElementById("result");
    resultContainer.innerHTML = "";
    for (var i = 0; i < data.length; i++) {
        var item = document.createElement("p");
        item.textContent = data[i].name;
        resultContainer.appendChild(item);
    }
}