添加對jQuery插件使用引導類的動態下拉列表

Question

我需要在按鈕單擊上添加一組下拉菜單和其他控件。 我使用此引導片段來實現這一目標：

https://bootsnipp.com/snippets/AXVrV

但是，我想在這些下拉菜單上使用bootstrap-select。

<select class="form-control" id="educationDate" name="educationDate[]">
  <option value="">Date</option>
  <option value="2015">2015</option>
  <option value="2016">2016</option>
</select>

在此JavaScript創建的div的內部html中，如果我給select標簽“ selectpicker”類使用bootstrap-select ，則它不起作用，因為bootstrap-select使用div，按鈕等的組合來實現外觀比選擇。 重新創建所有這些嵌套標簽將很麻煩並且不太可靠。 有沒有辦法在JavaScript中實現它或在Aurelia中使用重復？

更新：對不起，我不清楚。 我需要在單擊按鈕時動態地重復一組下拉菜單，而不只是選項。 我有一個帶有以下代碼的組件“ list1”：

   <div class="btn-group col-sm-4">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span id="selected"> ${list}  </span><span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li role="presentation" repeat.for="list of lists">
    <a href="#" click.delegate="somefunction()">${listName}</a></li>
            </ul>
        </div>

這給了我一個bootstrap下拉菜單。 然后，我還有另一個帶有類似標簽集的組件“ list2”。 我認為

        <div id="mydiv">
           <list1></list1>
           <list2></list2>
        </div>

他們表現很好。 現在我想有一個按鈕，可以動態添加這兩個下拉列表的集合，即

 <button id="add" click.delegate="addFields()"></button>

在我的虛擬機中，我有

addFields() {
 var list = document.createElement("select");
var div = document.getElementById("mydiv");
 div.appendChild(list);
}

此按鈕添加常規選擇下拉列表。 我希望它在上面添加樣式化的下拉組件。 我要繼續添加嗎

  var dd = document.createElement("button");
    dd.class="btn btn-default dropdown-toggle";

等等，還是有更好的方法？

Answer 1

您可以通過repeat.for通過兩種方式來執行此repeat.for ：從視圖模板或從視圖模型

1. 查看范本

<template>
  <select class="form-control" id="educationDate" name="educationDate[]">
    <option value="">Date</option>
    <option repeat.for='year of [2015, 2016, 2017, 2018]' model.bind='year'>${year}</option>
  </select>
</template>

2. 從視圖模型

export class MyClass {
  years = [2015, 2016, 2017, 2018, 2019]
}

然后在您看來：

<template>
  <select class="form-control" id="educationDate" name="educationDate[]">
    <option value="">Date</option>
    <!-- notice the difference here, years instead of an array -->
    <option repeat.for='year of years' model.bind='year'>${year}</option>
  </select>
</template>

---

對於repeat.for每個選項，您可以使用value.bind或將其忽略。 取決於您想要獲取的數據類型。 model.bind表示number ，不使用model.bind表示string 。 例

<select value.bind='educationalYear'>
  <option value="">Date</option>
  <option repeat.for='year of [2015, 2016, 2017, 2018]'>${year}</option>
</select>

在這種情況下，模型中的educationalYear將是一個字符串。

Answer 2

如果有人正在尋找類似的東西，我已經實現了這一目標。 它比我想象的要簡單。

在我的虛擬機中，我有一個變量計數，每次單擊添加按鈕時，該計數都會增加。

addFields() {
this.count++;
}

現在，我在視圖中的div重復了該計數，每次單擊按鈕都會增加

 <div repeat.for="c of count">
       <list1></list1>
       <list2></list2>
    </div>