javascript-具有动态数据的Bootstrap Multiselect（js动态类）

25-02-24 11

在本文中，我们将详细介绍javascript-具有动态数据的BootstrapMultiselect的各个方面，并为您提供关于js动态类的相关解答，同时，我们也将为您带来关于BootstrapMult

在本文中，我们将详细介绍javascript-具有动态数据的Bootstrap Multiselect的各个方面，并为您提供关于js动态类的相关解答，同时，我们也将为您带来关于Bootstrap Multiselect、Bootstrap MultiSelect with Checkbox - 从 ListBox 本身触发、Bootstrap Multiselect 动态二联赋值支持多选、bootstrap multiselect 多选功能实现方法的有用知识。

本文目录一览：

javascript-具有动态数据的Bootstrap Multiselect（js动态类）
Bootstrap Multiselect
Bootstrap MultiSelect with Checkbox - 从 ListBox 本身触发
Bootstrap Multiselect 动态二联赋值支持多选
bootstrap multiselect 多选功能实现方法

javascript-具有动态数据的Bootstrap Multiselect（js动态类）

我正在尝试使用Bootstrap Multiselect插件(如果不熟悉,这里是链接https://github.com/davidstutz/bootstrap-multiselect),但是我希望该框可以动态填充,到目前为止,看来我只能拥有一个.对于多选功能,当它没有数据时.

我试图用来使选项多选的代码是这个

<script id="example">
$('#chkveg').multiselect({
  enableClickableOptGroups: true
});
</script>

现在该代码可以使其看起来正确,只是不显示任何数据.

Here是我的代码的小提琴.

解决方法:

刚打电话

.multiselect('rebuild');

选择更新后

我在JSFiddle上做了一些更改

Bootstrap Multiselect

Getting Started

Link the required Files

First,the jQuery library needs to be included. Then Twitter Bootstrap - both the Javascript library and the CSS stylesheet - needs to be included.
1. 
2. <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
3. <script type="text/javascript" src="js/jquery.min.js"></script>
4. <script type="text/javascript" src="js/bootstrap.min.js"></script>
6. 
7. <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
8. <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
The jQuery library can also be included using a CDN,for example the Google CDN:
1. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Note that the plugin will work both with version 2.x of the jQuery library as well as with version 1.10.x of the jQuery library. So for using the Google CDN you may have to adjust the version.
Create a Select

Now simply use HTML to create your select input which you want to turn into a multiselect. Remember to set the multipleattribute as to get a real multiselect - but do not worry,the plugin can also be used as usual select without the multipleattribute being present.
1. 
2. <select id="example-getting-started" multiple="multiple">
3. <option value="cheese">Cheese</option>
4. <option value="tomatoes">Tomatoes</option>
5. <option value="mozarella">Mozzarella</option>
6. <option value="mushrooms">Mushrooms</option>
7. <option value="pepperoni">Pepperoni</option>
8. <option value="onions">Onions</option>
9. </select>
Call the Plugin

In the end,simply call the plugin on your select. You may also specify further options,see the Options tab for further information.

None selected
1. 
2. <script type="text/javascript">
3. $(document).ready(function() {
4. $(‘#example-getting-started‘).multiselect();
5. });
6. </script>

Bootstrap MultiSelect with Checkbox - 从 ListBox 本身触发

如何解决Bootstrap MultiSelect with Checkbox - 从 ListBox 本身触发？

我使用优秀的插件 http://davidstutz.github.io/bootstrap-multiselect/

实现了带有复选框的 MultiSlect 下拉列表

   @Html.ListBoxFor(m => Model.DepDashTaskLists[i].BusinessRuleQuestion1Answer,new MultiSelectList(slh.GetRegistrationAnswerLookup(Model.DepDashTaskLists[i].BusinessRuleQuestion1),"Value","Text",Model.DepDashTaskLists[i].BusinessRuleAnswers),new { multiple = "multiple",@id = "RuleQuestionListBoxAnswer",@https://www.jb51.cc/tag/Box/" target="_blank">Box",@rows = "2",@columns = "40" })

Javascript：

  $(function () {
       // $(''#RuleQuestionListBoxAnswer'').multiselect();
        $(''.listBox'').multiselect({
            includeselectAllOption: true
        });
    });

我唯一的问题是asp.net mvc下拉列表和插件下拉列表都来了

enter image description here

从用户体验来看这很尴尬，有没有办法在单击列表框本身时打开带有复选框的下拉列表。如果不是，我至少可以禁用列表框下拉菜单吗？我看到有自定义 https://github.com/davidstutz/bootstrap-multiselect/#styling 的方法，但我在 CSS 方面经验不足，并且不确定是否可以完全消除按钮并在单击列表框内时触发复选框下拉列表。