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所示。您可以根据需要自定义弹出窗口，例如可以在此弹出窗口中放置下拉菜单，然后像内联弹出窗口一样调用它。

希望这对您有所帮助。

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

1 个答案: