添加为jQuery插件使用bootstrap类的动态下拉列表-Java 学习之路

我需要在按钮点击时添加一组下拉菜单和其他控件 . 我使用这个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标签"selectpicker"类使用 bootstrap-select ，它不起作用，因为bootstrap-select使用div，按钮等的组合来实现外观而不是选择 . 重新创建所有嵌套标签将是一件麻烦事，而且不是很可靠 . 有没有办法在JavaScript中实现它或在Aurelia中使用repeat？

更新：对不起，我不清楚 . 我需要在按钮单击时动态重复一组下拉菜单，而不仅仅是选项 . 我有一个组件“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>

在我的vm中，我有

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

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

2 回答

有两种方法可以通过 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 将是一个字符串 .

回复于 2024-05-02T21:27:05+08:00

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

在我的虚拟机中，我有一个变量计数，每次单击添加按钮时我都会增加 .
```
addFields() {
this.count++;
}
```
视图中的我的div现在重复计数，每按一次按钮就会增加
```
<div repeat.for="c of count">
       <list1></list1>
       <list2></list2>
    </div>
```
回复于 2024-05-02T21:27:05+08:00

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

2 回答

相关问题