如何创建自定义下拉列表以更改内容

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

#myDropdown {
  width: 200px;
  height: 30px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

// 获取下拉列表元素
var dropdown = document.getElementById("myDropdown");

// 添加事件监听器
dropdown.addEventListener("change", function() {
  // 获取选中的选项值
  var selectedOption = dropdown.value;

  // 执行相应的操作或更新内容
  switch(selectedOption) {
    case "option1":
      // 执行选项1的操作
      break;
    case "option2":
      // 执行选项2的操作
      break;
    case "option3":
      // 执行选项3的操作
      break;
    default:
      // 默认操作
      break;
  }
});