javascript - 如何在弹出警报中创建下拉按钮？

Question

我想在弹出警报中创建一个下拉按钮。并且，下拉按钮必须从数据库中的数组填充。目前，我成功创建了从数据库填充数组的下拉按钮(html 按钮)。但是，我不知道如何将该下拉按钮置于弹出警报内。

HTML:

<!--Trigger-->
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"> Choose Stations</button>
<!--Menu-->
<div id="dropdown-station-list" class="dropdown-menu dropdown-secondary">
</div>
<p id="station"></p>
<!--Trigger-->
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"> Choose Stations</button>
<!--Menu-->
<div id="dropdown-station-list" class="dropdown-menu dropdown-secondary">
</div>
<p id="station"></p>

Javascript:

$(function() {
  $.get("{% url 'rt3:api_station_list' %}", function(data) {
    // $("#dropdown-station-list").empty();
    alert("Choose which station you want to start your job")
    for (var i in data) {
      var dropdown_item = $("<button>", {
        class: "dropdown-item",
        text: data[i].name
      }).click(function() {
        var selected_tag = $(this).text();
        console.log(selected_tag + " selected");
        alert("Your location is : " + selected_tag);
        $("#station").append(selected_tag);
        $(this).addClass("active");
      });
      $("#dropdown-station-list").append(dropdown_item);
    }
  });
});

我想在我的警报弹出消息中创建下拉按钮，如下所示... look at this picture

Answer 1

根据你的描述，我认为Magnific popup非常适合您的使用。您还可以在放大弹出窗口中使用表单，如此处所示 Popup with form .您可以根据需要自定义弹出窗口，就像您可以在此弹出窗口内设置下拉菜单并将其称为内联弹出窗口一样。

希望对你有帮助。