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

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);
    }
  });
});

我想在我的警报弹出消息中创建下拉按钮，如下所示......看看这张图片

Answer 1

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

希望这对您有所帮助。