如何使用AJAX和JavaScript在更改一个下拉列表时更新并保存它

<select id="myDropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

var dropdown = document.getElementById("myDropdown");

dropdown.addEventListener("change", function() {
  var selectedValue = dropdown.value;

  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  // 设置请求方法和URL
  xhr.open("POST", "/save-dropdown-value", true);

  // 设置请求头
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  // 定义回调函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 处理服务器返回的响应数据
      console.log(xhr.responseText);
    }
  };

  // 发送AJAX请求
  xhr.send("selectedValue=" + selectedValue);
});

app.post("/save-dropdown-value", function(req, res) {
  var selectedValue = req.body.selectedValue;

  // 进行保存操作，例如将值存储到数据库中

  // 返回响应数据
  res.send("Value saved successfully!");
});