如何使用jquery填充作为按钮和无序列表实现的下拉列表中的数据

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<button id="dropdown-btn">下拉列表</button>
<ul id="dropdown-list"></ul>

$(document).ready(function() {
  // 定义要填充的数据
  var data = ["选项1", "选项2", "选项3", "选项4"];

  // 遍历数据并将每个选项添加到下拉列表中
  $.each(data, function(index, value) {
    var listItem = $("<li>").text(value);
    $("#dropdown-list").append(listItem);
  });

  // 当按钮被点击时显示或隐藏下拉列表
  $("#dropdown-btn").click(function() {
    $("#dropdown-list").toggle();
  });
});