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的html中，如果我给select标签＆＃34; selectpicker＆＃34;要使用bootstrap-select的类，它不起作用，因为bootstrap-select使用div，按钮等的组合来实现外观而不是选择。重新创建所有嵌套标签将是一件麻烦事，而且不是很可靠。有没有办法在JavaScript中实现它或在Aurelia中使用repeat？

更新：对不起，我不清楚。我需要在按钮单击时动态重复一组下拉菜单，而不仅仅是选项。我有一个组件＆＃34; list1＆＃34;使用以下代码：

   <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下拉列表。然后我有另一个组件＆＃34; list2＆＃34;与类似的标签集。在我看来，我有

        <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：从视图模板或视图模型

进行操作

查看模板

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

来自view-model

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的{{1}}，number没有model.bind。实施例

string

这种情况下，模型中的<select value.bind='educationalYear'> <option value="">Date</option> <option repeat.for='year of [2015, 2016, 2017, 2018]'>${year}</option> </select>将是一个字符串。

Answer 2

如果有人在寻找类似的东西，我已经实现了这个目标。它的方式比我想象的要简单。

在我的虚拟机中，我有一个变量计数，每次点击添加按钮时我都会增加。

addFields() {
this.count++;
}

视图中的我的div现在重复计算，每按一次按钮就会增加

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

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

2 个答案: