为 jQuery 插件添加使用 bootstrap 类的动态下拉列表

Question

我需要在单击按钮时添加一组下拉菜单和其他控件。我使用这个 bootsnip 来实现：

但是，我想在这些下拉菜单中使用 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的这个innher html中，如果我给select标签"selectpicker" class使用bootstrap-select，它不起作用，因为 bootstrap-select 使用 div、按钮等的组合来实现外观而不是 select。重新创建所有这些嵌套标签会很麻烦而且不太可靠。有没有办法在 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);
}

此按钮添加常规 select 下拉菜单。我希望它在上面添加程式化的下拉组件。我是否继续添加

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

等等，或者有更好的方法吗？

Answer 1

有两种方法可以通过 repeat.for 实现：从视图模板或视图模型

查看模板

<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>

来自视图模型

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>

为 jQuery 插件添加使用 bootstrap 类的动态下拉列表

Adding dynamic dropdown that use bootstrap classes for jQuery plugins

html

javascript

jquery

twitter-bootstrap

aurelia

为 jQuery 插件添加使用 bootstrap 类 的动态下拉列表

Adding dynamic dropdown that use bootstrap classes for jQuery plugins

html

javascript

jquery

twitter-bootstrap

aurelia

为 jQuery 插件添加使用 bootstrap 类的动态下拉列表