点击按钮时如何生成下拉菜单？

<button onclick="showDropdown()">点击按钮</button>
<select id="dropdown" style="display: none;">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<script>
function showDropdown() {
  var dropdown = document.getElementById("dropdown");
  if (dropdown.style.display === "none") {
    dropdown.style.display = "block";
  } else {
    dropdown.style.display = "none";
  }
}
</script>

<button onclick="showDropdown()">点击按钮</button>

<script>
function showDropdown() {
  var dropdown = document.createElement("select");
  dropdown.setAttribute("id", "dropdown");

  var option1 = document.createElement("option");
  option1.setAttribute("value", "option1");
  option1.appendChild(document.createTextNode("选项1"));
  dropdown.appendChild(option1);

  var option2 = document.createElement("option");
  option2.setAttribute("value", "option2");
  option2.appendChild(document.createTextNode("选项2"));
  dropdown.appendChild(option2);

  var option3 = document.createElement("option");
  option3.setAttribute("value", "option3");
  option3.appendChild(document.createTextNode("选项3"));
  dropdown.appendChild(option3);

  var button = document.getElementsByTagName("button")[0];
  button.appendChild(dropdown);
}
</script>

<button onclick="showDropdown()">点击按钮</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function showDropdown() {
  var dropdown = $("<select></select>").attr("id", "dropdown");
  dropdown.append($("<option></option>").attr("value", "option1").text("选项1"));
  dropdown.append($("<option></option>").attr("value", "option2").text("选项2"));
  dropdown.append($("<option></option>").attr("value", "option3").text("选项3"));

  $("button").append(dropdown);
}
</script>