multi-select 相关问题

mudblazor 表服务器多页与多选

我想在服务器模式下使用表格组件并使用多选。 目前，当我在第 1 页上选择一个框时，当我转到第 2 页时，我的选择不会保存（如果我返回到第 1 页，则该框为 no

引导多选不起作用

我正在尝试使用多选Bootstrap，我使用了以下代码，该代码也可以在他们的网站（http://davidstutz.github.io/bootstrap-multiselect/）中找到，它显示了多选按钮

primeNG 多选更改不会在芯片移除时触发

下面是我的代码示例。 primeng 多重选择是 primeng 下拉列表的来源： HTML： 下面是我的代码示例。 primeng 多重选择是 primeng 下拉列表的来源： HTML： <p-multiSelect [options]="elements" [(ngModel)]="selectedElements" optionLabel="name" display="chip" (onChange)="onElementChange($event)"></p-multiSelect <p-dropdown [options]="availableElements" [(ngModel)]="selectedElement" optionLabel="elementID" placeholder="Select an Element"></p-dropdown> ts： onElementChange(event) { this.availableElements = []; this.availableElements = event.value; } 从多选下拉列表中选择元素完全有效，但是当我从多选芯片中删除元素时，不会触发 onChange 事件： 如何触发onChange？这是一个不受支持的事件吗？ 预先感谢。 这被认为是组件的一个错误，因为当你删除它时，内部状态已经更新...所以暂时你需要通过使用 onClick 事件和模板变量来获取组件值来更新状态。 <p-multiSelect [options]="cities" [(ngModel)]="selectedCities2" defaultLabel="Select a City" optionLabel="name" display="chip" (onClick)="selectedCities2 = elm.value" #elm> </p-multiSelect> {{selectedCities2| json}} stackblitz 演示 自12.2.2 primeng版本以来已修复错误 您可以调用 p-multiSelect 的 onChange() 事件，例如： <p-multiSelect [options]="cities" [(ngModel)]="selectedCities2" defaultLabel="Select a City" optionLabel="name" display="chip" (onChange)="selectedCities2 = elm.value" #elm> </p-multiSelect>

如何使用 Blazor 修改 Telerik 组件内的元素样式？

我正在尝试从 TelerikMultiSelect 组件内部修改自动完成属性。这是 TelerikMultiSelect 生成的 html 代码： 我正在尝试从 TelerikMultiSelect 组件内部修改自动完成属性。这是 TelerikMultiSelect 生成的 html 代码： <div data-id="" class="telerik-blazor k-multiselect autocompleteDisabled k-input k-input-solid k-input-md k-rounded-md" dir="ltr"> <!--!--> <div class="k-input-values" tabindex="-1"> <div class="k-chip-list k-chip-list-md"> </div> <!--!--> <input type="text" autocomplete="off" placeholder="" size="1" tabindex="0" class="k-input-inner" role="combobox" aria-busy="false"><!--!--> </div> <button class="telerik-blazor k-button k-input-button k-button-solid k-button-md k-button-solid-base k-icon-button k-hidden" id=" data-id="" dir="ltr" tabindex="-1" type="button"> <!--!--> <!--!--> <span class="telerik-blazor k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down" aria-hidden="true"> <!--!--> <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <!--!--> <!--!--> <path d="M256 352 128 160h256z"></path> <!--!--> </svg> </span> </button> </div> 这个组件有一个“Class”参数，我可以在其中修改CSS，但它不会影响自动完成属性所在的标签。正如你所看到的，默认情况下，自动完成功能是“关闭”的，但我读到这在 Chrome 中不起作用，所以每当我在框中单击时，我的地址都会建议由自动完成功能填充。 我已经用JS完成了，OnAfterRenderAsync我调用JS函数，它将自动完成属性更改为“禁用”，然后它停止工作。但由于我有一个使用 Blazor 的干净 JS 项目，这不是我想要的解决方案。 请问有什么想法可以帮助我吗？ 提前非常感谢您 我们在我工作的公司使用 Telerik，我也遇到过同样的问题，通常从组件库修改组件的 css 有时会很困难，因为它可以改变组件的行为（根据我的经验）。但是解决方法我发现修改任何 telerik 组件 css 是在您正在使用它的 .razor 页面（或 .cshtml）中使用。 让我展示一个示例，我创建了一个名为 Example.razor 的 .razor 文件，其中包含以下代码 为了演示我之前所说的，我们将使用 blazor css 隔离 正如我们所看到的，我创建了一个 css 类，如果我们在按钮组件中使用该 css 类，则背景颜色不会不适用。但如果我们在同一个 .razor 文件中使用标签，这就会起作用 这样你就可以实现你想要做的事情，我希望这能启发你。

Struts 2 中具有数千个选项的多重选择

我在JSP中有以下多选块 在 标签内。当我提交表格时 操作方法工作正常。 我在 JSP 中有以下多选块 在 <s:form> 标签内。当我提交表格时 操作方法工作正常。 <s:select id="prodSelect" list="#application.actionForm.vtrProduct" name="repSearchProdVO.product" multiple="true" emptyOption="false" headerKey="-1" theme="simple" style=" font-size: 14px; color: #000069; font-family: 'Arial, Helvetica, sans-serif'; height: 20px; width: 240px; " value="#session.repSearchVO.product" /> 但是，repSearchProdVO.product只能处理890个选项。 我有超过3000个选项需要选择。 当我选择 2000 个选项时，它仍然返回 890 个选项。 如果有任何帮助，我将不胜感激。 我忘了提及服务器是Tomcat 9.0.75。 server.xml 中端口 8080 的 maxParameterCount 的默认值为 1000。我将其更改为 10000，一切都按预期工作。这可能会对某人有所帮助。 <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxParameterCount="10000" /> 在 Struts 2 中，无法将 <s:select> 用于大型数据集。因为它呈现一个简单的 HTML <select>，它受到显示大小选项的限制。如果您设置更多选项，它们只会隐藏在您的显示尺寸后面。如果您需要在大型数据集中选择多个选项，那么您可以使用带有结果查询的请求。 例如<sj:autocompleter>可以通过搜索词使用的远程https请求来帮助您查询大型数据集。 它有一个 multiselect 属性 创建多项选择。如果值通过 value 属性作为数组或集合（适当类型）传递，则标记将预先选择多个值。如果其中一个键等于集合或数组中的值之一，它将被选择。 您可以在this答案中找到自动完成器小部件的示例。

根据 JSON 数组选择复选框值

我将一些 id 值作为 json 字符串存储在我的数据库中。我使用这些相同的 id 作为表单上 Bootstrap 多选复选框控件中的复选框值。 [{“formLookupId”：16}，...

通过 AJAX 添加复选框成功使用 Bootstrap MultiSelect 复选框列表下拉列表

我希望使用 Ajax 调用的数据结果附加一些复选框，但是我在执行此操作时遇到了一些麻烦。迭代时我的 Response[i] 项似乎未定义。添加...

删除 Select2 Jquery 插件中的默认选择

我在表单中使用 select2 作为多选选项。在表单中，我使用按键控件来遍历表单。因此，如果我按 Tab 键，它应该遍历表单中的字段。当我按...

ng-multiselect-dropdown 总是被解雇

我正在使用 ng-multiselect-dropdown。我对其中一个回调有疑问 我正在使用 ng-multiselect-dropdown。我的其中一个回调有问题 <ng-multiselect-dropdown *ngIf="filteredSids.length > 0" [data]="filteredSids" [disabled]="false" [(ngModel)]="selectedSids" (onSelect)="selectedSIDs($event); onItemSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelect)="onItemDeSelect($event)" (onDeSelectAll)="onDeSelectAll($event)" [settings]="dropdownSettings" (onDropDownClose)="onCloseDialog($event)"> </ng-multiselect-dropdown> onDropDownClose 回调不仅在下拉菜单关闭时触发，而且在我单击页面中的任意位置时触发。即使下拉菜单处于关闭状态，它也会被解雇。仅当下拉菜单关闭时，我才需要将其解雇。任何帮助表示赞赏。 我发现每次您单击下拉菜单时都会触发“onDropDownClose”事件，就我而言，这意味着每次我单击整个页面上的某个位置时都会触发该事件.. 似乎我需要做一些组件隔离重构的事情来解决这个问题。 或者简单地保留该事件，仅使用“onSelect”、“click”或类似的

jqGrid：如何在不同页面上使用多选

简单的问题，很难找到答案： 如果我尝试以编程方式选择一行，我会使用以下命令： $('#grid').jqGrid('setSelection', rowId); 问题是它只选择当前视图中的行...

Android Jetpack：如何使用 PagingDataAdapter 在回收器视图中进行多项选择？

我想在我的 Android 应用程序中进行多项选择。 我以前做过，但只使用了 ArrayAdapter。 我有一个 Flow 作为我的数据集，并使用带有 ViewHolder 的 PagingDataAdapter。 我的问题...

如何正确处理多选？

我正在努力处理 .NET 8 Blazor 服务器端应用程序中的多选下拉组件。我正在使用 MudBlazor 选择组件来支持多重选择。 我正在加载来自...的部门列表

PrimeNG - 带用户确认的多重选择

我有一个多选组件，我希望每当用户更改其选定的选项时都显示一条确认消息，询问他们是否要继续进行该更改并根据他们的

引导多选获取选定值

如何返回 onChange 多选下拉列表中的所有选定值。这里使用了插件。尝试使用以下内容，但我认为我走错了路 $('#multiselect1').multiselect({ ...

提交和访问可重复的多选字段值

我正在创建动态多行以将数据存储到数据库中。当创建行时，所有前端工作正常，并且还通过选定的选择在 docname1 字段中选择了多个值。但问题是我...

C# ListView ItemSelectionChanged 事件多选仅获取最后选择的项目

我在 C# .NET 4.5 中使用多选 ListView 选择多个项目（即 Shift + End 或 Shift + Click 等）时会出现此问题。这些只是许多不同鼠标/键盘的几个示例

jQuery 多选下拉菜单

我有一个简单的 html 多选下拉列表： 分配 ... 我有一个简单的 html 多选下拉列表： <select id="transactionType" multiple="multiple" size="10"> <option value="ALLOC">ALLOC</option> <option value="LOAD1">LOAD1</option> <option value="LOAD2">LOAD2</option> <!-- etcetera... --> </select> 我想在 javascript 被禁用的情况下继续使用此列表，但是使用 javaScript 我想将该列表呈现为多选下拉列表。也就是说，它仅显示列表中的一项，直到单击为止，然后将展开以显示 x 项并提供滚动，其中我可以在按住 Shift 或 Ctrl 的同时按照您的预期选择多个元素。 jQuery 新手正在搜索 http://jquery.com/ 但尚未找到我需要的内容。 编辑 Struts2 用户，所选答案将使用 [] 进行 url 编码，这会导致 struts2 出现问题，但修复非常简单。只需打开 jquery.multiSelect.js 并搜索“[]”并删除在字符串连接中使用的一个实例。我还使用 jQuery 1.4.4，而不是与它捆绑在一起的 1.3.2，一切都工作得很好。 更新（2017）： 以下两个库现已成为 Javascript 中最常用的下拉库。虽然它们是 jQuery 原生的，但它们已经过定制，可以与从 AngularJS 1.x 到 Bootstrap 的自定义 CSS 的所有内容一起使用。 （Chosen JS，这里的原始答案，受欢迎程度似乎已经下降到#3。） 选择2：https://select2.github.io/ 选择：http://selectize.github.io/selectize.js/ 下面是必要的屏幕截图。 选择2： 选择： 原始答案（2012）：我认为选择的库也可能有用。它有 jQuery、Prototype 和 MooTools 版本。 随附的是“Chosen”中多选功能的屏幕截图。 我也在为我的公司寻找一个简单的多重选择。我想要一些简单的、高度可定制的、除了 jQuery 之外没有大依赖的东西。 我没有找到适合我需求的，所以我决定编写自己的代码。 我在生产中使用它。 这里有一些演示和文档：loudev.com 如果您想贡献，请检查 github 存储库 下载jquery.multiselect 包含 jquery.multiselect.js 和 jquery.multiselect.css 文件 <script src="jquery-ui-multiselect-widget-master/src/jquery.multiselect.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery-ui-multiselect-widget-master/jquery.multiselect.css" /> 填充您选择的输入 添加多选 $('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total }); 您可以改变风格 ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; } 如果要重新填充选择，则必须刷新它： $('#' + Field).multiselect('refresh'); 获取所选值（逗号分隔）： var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get(); 要清除所有选定的值： $('#' + Field).multiselect("uncheckAll"); 看看 erichynds 下拉多选，其中包含大量设置和调整。 您可以使用 selected.i 从该链接下载所有文件 选择下载链接 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="prism.css" rel="stylesheet" type="text/css" /> <link href="chosen.css" rel="stylesheet" type="text/css" /> <script src="jquery-2.1.4.min.js" type="text/javascript"></script> <script src="chosen.jquery.js" type="text/javascript"></script> <script src="prism.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(".chzn-select").chosen(); }); </script> </head> <body> <form id="form1" runat="server"> <div> <ion-view view-title="Profile"> <ion-content class="padding"> <div> <label class="item item-input"> <div class="input-label">Enter Your Option</div> <select class="chzn-select" multiple="true" name="faculty" style="width:1000px;"> <option value="Option 2.1">Option 2.1</option> <option value="Option 2.2">Option 2.2</option> <option value="Option 2.3">Option 2.3</option> </select> </label> </div> </ion-content> </ion-view> </div> </form> </body> </html> 同一文件夹中的所有文件 <select id="mycontrolId" multiple="multiple"> <option value="1" >one</option> <option value="2" >two</option> <option value="3">three</option> <option value="4">four</option> </select> var data = "1,3,4"; var dataarray = data.split(","); $("#mycontrolId").val(dataarray); 您可以破解自己的，而不是依赖 jQuery 插件...尽管您需要在外部（在 JS 中）跟踪所选项目，因为转换会删除所选状态信息： <head> <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> <script type='text/javascript'> $(window).load(function(){ $('#transactionType').focusin(function(){ $('#transactionType').attr('multiple', true); }); $('#transactionType').focusout(function(){ $('#transactionType').attr('multiple', false); }); });> </script> </head> <body> <select id="transactionType"> <option value="ALLOC">ALLOC</option> <option value="LOAD1">LOAD1</option> <option value="LOAD2">LOAD2</option> </select> </body> 我使用 jQuery MultiSelect 来实现带有复选框的多选下拉菜单。您可以从这里查看实施指南 - 带有复选框的多选下拉列表 实现非常简单，只需要使用以下代码即可。 $('#transactionType').multiselect({ columns: 1, placeholder: 'Select Transaction Type' }); 你想做这样的事情吗http://jsfiddle.net/robert/xhHkG/ $('#transactionType').attr({ 'multiple': true, 'size' : 10 }); 将其放入 $(function() {...}) 或其他加载中 编辑 重新阅读您的问题，您实际上并不是在寻找多项选择...而是一个允许您选择多项的下拉框。是的，可能最好使用插件或从头开始编写它，但这不是“快速回答”类型的交易。 试试这个多选功能 $(document).ready(function(){ var multipleCancelButton = new Choices('#choices-multiple-remove-button', { removeItemButton: true, maxItemCount:5, searchResultLimit:5, renderChoiceLimit:5 }); }); .mt-100{margin-top: 100px}body{background: #00B4DB;background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);background: linear-gradient(to right, #0083B0, #00B4DB);color: #514B64;min-height: 100vh} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css"> <script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script> <div class="row d-flex justify-content-center mt-100"> <div class="col-md-4"> <select id="choices-multiple-remove-button" placeholder="Select upto 5 tags" multiple> <option value="HTML">HTML</option> <option value="Jquery">Jquery</option> <option value="CSS">CSS</option> <option value="Bootstrap 3">Bootstrap 3</option> <option value="Bootstrap 4">Bootstrap 4</option> <option value="Java">Java</option> <option value="Javascript">Javascript</option> <option value="Angular">Angular</option> <option value="Python">Python</option> <option value="Hybris">Hybris</option> <option value="SQL">SQL</option> <option value="NOSQL">NOSQL</option> <option value="NodeJS">NodeJS</option> </select> </div> </div> 下拉菜单 尝试这个真实的例子 - https://bbbootstrap.com/snippets/multiselect-dropdown-list-83601849

vue多选组件自定义样式

我添加了一个vue多选组件...但我想用css样式自定义它。我已经添加了一些 css 样式，但不能做我想做的一切。就像我想改变选项高度一样，

在 ANTD React 中使用全选选项进行多选

我有一个表单，其中有一个多选下拉 antd 组件。 在更改全选选项时，我需要选择最多 5 个标签的所有可用选项。 请找到链接...

如何在anguler1，Bootstrap3中添加多选复选框下拉列表

我是angulerJS的新手，所以不知道如何添加多选复选框下拉列表。 这是我的部分 html，显示多选。我希望它呈带有复选框的下拉菜单形状，如图所示...