如何在彈出警報中創建下拉按鈕？

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 。 您可以根據需要自定義彈出窗口，就像您可以在此彈出窗口中設置下拉菜單並將其稱為內聯彈出窗口一樣。

希望這對您有所幫助。