如何在用户尝试更改span的文本时显示contentEditable span/div项上的下拉列表

<div>
  <span contentEditable="true" id="editableSpan">可编辑的文本</span>
</div>

document.getElementById("editableSpan").addEventListener("click", function() {
  // 创建下拉列表元素
  var dropdown = document.createElement("select");
  
  // 添加下拉列表选项
  var option1 = document.createElement("option");
  option1.text = "选项1";
  dropdown.add(option1);
  
  var option2 = document.createElement("option");
  option2.text = "选项2";
  dropdown.add(option2);
  
  // 设置下拉列表的位置和样式
  dropdown.style.position = "absolute";
  dropdown.style.top = this.offsetTop + this.offsetHeight + "px";
  dropdown.style.left = this.offsetLeft + "px";
  
  // 将下拉列表添加到span元素中
  this.parentNode.appendChild(dropdown);
  
  // 监听下拉列表的change事件
  dropdown.addEventListener("change", function() {
    // 更新span元素的文本内容为选中的选项
    document.getElementById("editableSpan").textContent = this.value;
    
    // 移除下拉列表
    this.parentNode.removeChild(this);
  });
});