Multiselect是一种用户界面功能,允许用户在项目控件中选择多个项目。项目控件可以是包含可选项目的任何内容,例如下拉列表,数据网格或自定义列表或项目组。
如何使用 <s:select> 标签在 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 个选项。 在 Struts 2 中,无法将 <s:select> 用于大型数据集。因为它呈现一个简单的 HTML <select>,它受到显示大小选项的限制。如果您设置更多选项,它们只会隐藏在您的显示尺寸后面。如果您需要在大型数据集中选择多个选项,那么您可以使用带有结果查询的请求。 例如<sj:autocompleter>可以通过搜索词使用的远程https请求来帮助您查询大型数据集。 它有一个 multiselect 属性 创建多项选择。如果值通过 value 属性作为数组或集合(适当类型)传递,则标记将预先选择多个值。如果其中一个键等于集合或数组中的值之一,它将被选择。 您可以在this答案中找到自动完成器小部件的示例。 我忘了提及服务器是Tomcat 9.0.75。 maxParameterCount中端口8080的server.xml的默认值为1000。我将其更改为10000,一切都按预期工作。这可能会对某人有所帮助。 <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxParameterCount="10000" />
我想在服务器模式下使用表格组件并使用多选。 目前,当我在第 1 页上选择一个框时,当我转到第 2 页时,我的选择不会保存(如果我返回到第 1 页,则该框为 no
我正在尝试使用多选Bootstrap,我使用了以下代码,该代码也可以在他们的网站(http://davidstutz.github.io/bootstrap-multiselect/)中找到,它显示了多选按钮
下面是我的代码示例。 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 文件中使用标签,这就会起作用 这样你就可以实现你想要做的事情,我希望这能启发你。
我在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答案中找到自动完成器小部件的示例。
我将一些 id 值作为 json 字符串存储在我的数据库中。我使用这些相同的 id 作为表单上 Bootstrap 多选复选框控件中的复选框值。 [{“formLookupId”:16},...
通过 AJAX 添加复选框成功使用 Bootstrap MultiSelect 复选框列表下拉列表
我希望使用 Ajax 调用的数据结果附加一些复选框,但是我在执行此操作时遇到了一些麻烦。迭代时我的 Response[i] 项似乎未定义。添加...
我在表单中使用 select2 作为多选选项。在表单中,我使用按键控件来遍历表单。因此,如果我按 Tab 键,它应该遍历表单中的字段。当我按...
我正在使用 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”或类似的
简单的问题,很难找到答案: 如果我尝试以编程方式选择一行,我会使用以下命令: $('#grid').jqGrid('setSelection', rowId); 问题是它只选择当前视图中的行...
Android Jetpack:如何使用 PagingDataAdapter 在回收器视图中进行多项选择?
我想在我的 Android 应用程序中进行多项选择。 我以前做过,但只使用了 ArrayAdapter。 我有一个 Flow 作为我的数据集,并使用带有 ViewHolder 的 PagingDataAdapter。 我的问题...
我正在努力处理 .NET 8 Blazor 服务器端应用程序中的多选下拉组件。我正在使用 MudBlazor 选择组件来支持多重选择。 我正在加载来自...的部门列表
我有一个多选组件,我希望每当用户更改其选定的选项时都显示一条确认消息,询问他们是否要继续进行该更改并根据他们的
如何返回 onChange 多选下拉列表中的所有选定值。这里使用了插件。尝试使用以下内容,但我认为我走错了路 $('#multiselect1').multiselect({ ...
我正在创建动态多行以将数据存储到数据库中。当创建行时,所有前端工作正常,并且还通过选定的选择在 docname1 字段中选择了多个值。但问题是我...
C# ListView ItemSelectionChanged 事件多选仅获取最后选择的项目
我在 C# .NET 4.5 中使用多选 ListView 选择多个项目(即 Shift + End 或 Shift + Click 等)时会出现此问题。这些只是许多不同鼠标/键盘的几个示例
我有一个简单的 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多选组件...但我想用css样式自定义它。我已经添加了一些 css 样式,但不能做我想做的一切。就像我想改变选项高度一样,
我有一个表单,其中有一个多选下拉 antd 组件。 在更改全选选项时,我需要选择最多 5 个标签的所有可用选项。 请找到链接...