bootstrap-multiselect 相关问题

Bootstrap-Multiselect是指David Stutz的基于JQuery的插件,它提供了一个直观的用户界面,用于使用存在多个属性的选择输入。

Bootstrap Multiselect 仍然可行吗?

我正在尝试创建一个多选下拉菜单,用于切换哪些校园信息可见,并遇到了 David Stutz 的引导插件。 我调用了我的链接和脚本: 我正在尝试创建一个多选下拉菜单,用于切换哪些校园信息可见,并遇到了 David Stutz 的引导插件。 我调用了我的链接和脚本: <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" /> 我创建了下拉菜单 <select id="campusMultiSelect" multiple="multiple"> <option value="Campus1">Campus 1</option> <option value="Campus2">Campus 2</option> <option value="Campus3">Campus 3</option> </select> 要切换的部分中的id <div id="Campus1" class="rounded"> // Campus 1 information goes here </div> // <div> for Campus 2 and 3 go here 还有 javascript <script type="text/javascript"> $(function () { $('#campusMultiSelect').multiselect({ includeSelectAllOption: true }); $('#campusMultiSelect').change(function () { // Get the selected values var selectedValues = $(this).val(); // Define an array of campus IDs to toggle var campusIDs = ['Campus1', 'Campus2', 'Campus3']; // Iterate through the campus IDs and toggle their visibility campusIDs.forEach(function (campusID) { var showContent = selectedValues && selectedValues.indexOf(campusID) !== -1; $('#' + campusID).toggle(showContent); }); }); }); </script> 但是,当我运行它时,这是我得到的框,而不是我应该通过每个选项旁边的选择框得到的框 我遵循了使用文档中的所有说明,但显然没有得到我所期望的。 存储库中的代码最后一次更新是在 2022 年,所以这个多选仍然与当前版本的 Razor、ASP.NET Core 和 C# 兼容,还是我只是犯了一个非常明显的错误,忘记了分号之类的? 您可以在浏览器的开发者工具中查看您的bootstrap版本,并查看是否有相关错误信息。 您可以选择以下两种方法: 1. 如果您使用的bootstrap版本是V5,您可以迁移到v4。 2. 或者可以使用对应版本的bootstrap,但需要在Bootstrap Multiselect插件上进行相关的初始化配置。 可以作为bootstrap5.1.3的参考: <link href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link href="~/css/bootstrap-multiselect.css" rel="stylesheet" /> <select id="campusMultiSelect" multiple="multiple"> <option value="Campus1">Campus 1</option> <option value="Campus2">Campus 2</option> <option value="Campus3">Campus 3</option> </select> <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="~/js/bootstrap-multiselect.js"></script> @section scripts { <script src="~/lib/jquery/dist/jquery.js"></script> <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="~/js/bootstrap-multiselect.js"></script> <script type="text/javascript"> $(function () { $('#campusMultiSelect').multiselect({ buttonClass: 'form-select', templates: { button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>', } }); }); </script> } 可以看Multiselect的介绍:

回答 1 投票 0

如何使用 jQuery 在关闭下拉菜单时触发事件?

当用户关闭由“bootstrap-multiselect”UI 控制的下拉菜单时,我想重新加载页面。 这是我到目前为止所尝试过的 $('#ts_client_id').multiselect({

回答 4 投票 0

从 JQuery Multiselect 中隐藏底部状态栏

我用 Bootstap 设置了我的多选下拉菜单,但是底部状态栏是破坏用户体验的东西,有人能弄清楚如何关闭它吗? 这是Bootstap multiselect的配置 变种配置= {...

回答 0 投票 0

如何在response js网页中实现从下拉或列表中多选项目。

你好朋友,我是新的反应js网络。我想从下拉或列表中选择多个城市,像这样.image1和选择多个城市后,用户点击应用,然后引用看起来像......

回答 1 投票 0

在页面加载时获取Bootstrap multiselect的所有值。

我很容易在变化事件中获得多选的值,但无法在不做任何改变的情况下获得值。结果是空的。$('#multiselct').multiselect({ includeSelectAllOption: ...)

回答 1 投票 0

如何在angular2中获得多重选择下拉选择的值

嗨,我使用了Angular8和bootstrap4。我使用了bootstrap multi-select下拉列表,我需要获取选定的下拉列表值。我如何获得这些价值。演示TS:setTimeout(()=> {$(...

回答 1 投票 0

bootstrap multiselect不适用于jquery的Ajax调用中的api json绑定

我正在尝试在页面中使用Bootstrap multiselect复选框。如果数据是静态的,则可以正常工作而不会出现问题。但是,如果我将JSON数据动态绑定到它,则该下拉列表将无法正常工作。 ...

回答 2 投票 1

Boostrap 4 multiselect

我一直在努力进行多次选择引导。我可以选择多个选项的唯一方法是按住CTRL,然后选择,尽管我尝试实现多选...

回答 1 投票 0

使用jQuery使用optgroup加载Bootstrap-Multiselect

我正在像下面这样使用Bootstrap-multiselect:CARS ...

回答 1 投票 0

bootstrap multiselect filterClearBtn未显示

我正在使用Bootstrap multiselect,一切都很好,但是当我启用enableFiltering = true选项时,不会显示清除过滤器按钮。这就是我初始化组件的方式:$(“#ultra”)....

回答 1 投票 0

Knockoutjs在以编程方式更新可观察对象时未更新UI

为什么当我以编程方式更新可观察对象并打开模态时,为什么下拉列表没有更新?这是所有代码https://jsfiddle.net/krob636/jes9bvLw/119/更改可观察的更新......>

回答 1 投票 1

Bootstrap多项选择-每个组都不选择或最多选择一个

我使用bootstrap multiselect,使用以下选项,我可以不选择任何一个,也可以选择其中一个最大的选项: [50203-...

回答 1 投票 0

asp.net Web表单中的列表框多选

我一直在研究asp.net网络表单下拉列表中的多项选择。我找到了几种解决方案,但是当我在系统上实现它时,它将无法正常工作。我正在使用Visual Studio ...

回答 1 投票 0

使用多选jquery插件创建动态下拉框时出现问题

我正在尝试进行动态选择下拉菜单,我尝试同时在javascript和jquery中编写代码,但无法在下拉菜单中附加选项。当我尝试查看存储的内容时,HTML ...

回答 1 投票 0

Bootstrap Multiselect-单击/将侦听器更改为选项

请看下面我的例子。如何添加单击或更改侦听器,以提醒更改/单击的选项的值(例如)。 $(function(){$('。chkveg')。multiselect({...

回答 2 投票 0

如何隐藏bootstrap multiselect悬停工具提示?

我正在使用http://davidstutz.github.io/bootstrap-multiselect/提供的bootstrap multiselect插件。我在使用所有选定值悬停在工具提示上时遇到问题。它显示......

回答 4 投票 1

我的下拉列表使用bootstrap multiselect而不是填充

我正在尝试使用bootstrap javascript和css文件创建一个多选下拉列表。不幸的是,我动态创建的一组选项(使用AJAX)似乎没有填充...

回答 1 投票 0

bootstrap multiselect保持选择变化

我有一个下拉框,我正在使用bootstrap multiselect复选框。你可以告诉我(或指向一些文档)如何在页面重新加载后继续选择?用户检查选项1,3并推送...

回答 1 投票 0

使用所选选项的ng-options对象映射ng-model数组值

我有以下值:campaign_sms_templates = [11,22];和templateSMSList = [{“id”:11,“name”:“test”},{“id”:12,“name”:“test 12”},{“id”:22,“name”:“test 22“}];角度代码就像:&...

回答 2 投票 0

bootstrap-multiselect rebuild / refresh无法正常工作

我有2个bootstrap-multiselect盒子。我想根据通过Ajax调用在另一个中所做的选择来刷新一个项目。一切都有效,除了多选用来...

回答 1 投票 2

© www.soinside.com 2019 - 2024. All rights reserved.