dropdown 相关问题

bootstrap 下拉菜单在 laravel 项目中不起作用

引导下拉菜单不会出现。我该如何解决这个问题？ 在导航栏中单击时，引导下拉菜单不会出现。我该如何解决这个问题？ <li class="nav-item dropdown"> <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> <span class="caret"></span> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> {{ __('Logout') }} </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> </div> </li> 您的下拉脚本没有问题。 检查 jquery 是否已加载 检查你的 app.js 并在 boottrap 之前加载 jquery 奔跑npm run dev 如果没有问题，请检查您的浏览器控制台。 如果您正在使用 https://cdn.jsdelivr.net/npm/[电子邮件受保护]/dist/js/bootstrap.min.js 请替换为以下cdn并尝试 https://cdn.jsdelivr.net/npm/[电子邮件受保护]/dist/js/bootstrap.bundle.min.js 请注意，自 Bootstrap 5 起，正确的属性是 data-bs-toggle 不再是数据切换。 这适用于所有数据属性。

当选项显示在 ng-template 中以循环它们时禁用 p-dropdown 选项

我正在尝试禁用 p-dropdown 中的选项，但我使用 ng-template 来循环选项 这是我的代码 有什么建议吗？ 谢谢 我正在尝试禁用 p-dropdown 中的选项，但我使用 ng-template 来循环选项 这是我的代码 有什么建议吗？ 谢谢 <p-dropdown [options]="task.statusOptions" optionLabel="name" optionValue="id" (onChange)="updateTaskCurrentStatus($event, task)" appendTo="body" [placeholder]="this.dropdownPlaceholder(task)" > <ng-template let-status pTemplate="status"> <div [ngStyle]="{ color: status.uiSetting.color}" [ngClass]="{'pointer-events-none': status.enabled}">{{ status.name }}</div> </ng-template> </p-dropdown> 您可以配置一个属性disabled，其中包含禁用该选项的标志，然后我们可以使用[optionDisabled]="'disabled'"来设置禁用该选项的属性。 <p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [showClear]="true" [optionDisabled]="'disabled'" placeholder="Select a Country" > 该对象包含禁用它的标志。 <p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [showClear]="true" [optionDisabled]="'disabled'" placeholder="Select a Country" > 完整代码： import { Component, OnInit } from '@angular/core'; import { ImportsModule } from './imports'; @Component({ selector: 'dropdown-group-demo', template: ` <div class="card flex justify-content-center"> <p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [showClear]="true" [optionDisabled]="'disabled'" placeholder="Select a Country" > <ng-template pTemplate="selectedItem"> <div class="flex align-items-center gap-2" *ngIf="selectedCountry"> <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" style="width: 18px" /> <div>{{ selectedCountry.name }}</div> </div> </ng-template> <ng-template let-country pTemplate="item"> <div class="flex align-items-center gap-2"> <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px" /> <div>{{ country.name }}</div> </div> </ng-template> </p-dropdown> </div> `, standalone: true, imports: [ImportsModule], }) export class DropdownTemplateDemo implements OnInit { countries: any[] | undefined; selectedCountry: string | undefined; ngOnInit() { this.countries = [ { name: 'Australia', code: 'AU', disabled: true }, { name: 'Brazil', code: 'BR' }, { name: 'China', code: 'CN', disabled: true }, { name: 'Egypt', code: 'EG' }, { name: 'France', code: 'FR', disabled: true }, { name: 'Germany', code: 'DE' }, { name: 'India', code: 'IN', disabled: true }, { name: 'Japan', code: 'JP' }, { name: 'Spain', code: 'ES', disabled: true }, { name: 'United States', code: 'US' }, ]; } } Stackblitz 演示

PrimeNG 级联下拉菜单：初始化子下拉菜单

如何根据父下拉列表的值初始化子下拉列表？ 应用程序组件.html 如何根据父下拉列表的值初始化子下拉列表？ app.component.html <p-dropdown [options]="states" [(ngModel)]="selectedState" (onChange)="getCities($event.value)"></p-dropdown> <p-dropdown [options]="cities"></p-dropdown> app.component.ts export class AppComponent implements OnInit { cities: SelectItem[]; selectedState: string; stateNames = ['Alabama', 'Alaska', 'California']; states = this.stateNames.map((val, i, stateNames) => { return { label: val, value: val } }); cityNames = [ {state: 'Alabama', city: 'Birmingham'}, {state: 'Alabama', city: 'Huntsville'}, {state: 'Alabama', city: 'Montgomery'}, {state: 'Alaska', city: 'Anchorage'}, {state: 'Alaska', city: 'Juneau'}, {state: 'California', city: 'Fresno'}, {state: 'California', city: 'Perris'} ]; ngOnInit() { this.getCities(this.selectedState); } getCities(state):any[] { this.cities = this.cityNames .filter((el) => { return el.state === state }) .map((el) => { return { label: el.city, value: el.city } }); } } Plunker 示例 您必须使用 selectedState 中 stateNames 中的第一个国家/地区初始化 ngOnInit : this.selectedState = this.stateNames[0]; 参见笨蛋 使用 [ngModelOptions]="{standalone: true}" 那么它将直接与 ngModel 绑定。不需要与事件绑定

将数据库中的数据绑定到 Angular 17 和 .NetCore 8 中的下拉列表不起作用

我试图在 nG17 应用程序中加载某个组件/页面时将从数据库获取的数据绑定到下拉列表。后端API是用.NetCore 8编写的。我已经完成了相关的工作...

在 PrimeVue 下拉菜单中触发 onclick

我正在尝试在 PrimeVue 内的下拉菜单上使用 console.log 进行测试。查了一下，有人建议我使用“item-template”，但这似乎没有使用，因为它是......

下拉菜单只有一项时选择第一项，并禁用下拉primeng

如果我有以下下拉列表，如果filteredGroupNames中只有1个元素，如何选择第一项，然后禁用下拉列表并且不显示占位符 如果我有以下下拉列表，如果 filteredGroupNames 中只有 1 个元素，如何选择第一项，然后禁用下拉列表并且不显示 placeholder <ng-template pTemplate="content"> <div class="field"> <label>Name</label> <p-dropdown [(ngModel)]="newOrSelectedGroupName" [options]="filteredGroupNames" [showClear]="true" placeholder="Select a group" ></p-dropdown> </div> </ng-template> 如果没有设置占位符，p-dropdown 将选择第一个值，因此实现所要求行为的一个简单方法是放置一个条件占位符 <p-dropdown [(ngModel)]="newOrSelectedGroupName" [options]="filteredGroupNames" [showClear]="filteredGroupNames.length !== 1" [optionValue]="getOptionValue()" placeholder="filteredGroupNames.length === 1 ? '' : 'Select a group'" [disabled]="filteredGroupNames.length === 1" ></p-dropdown> 这样，如果只有一个选项，则不会设置占位符，默认选择它。 看起来 optionDisabled 是 PrimeNG 下拉列表的可用属性。您可以根据filteredGroupNames的长度将其设置为有条件禁用。类似于以下内容： <p-dropdown [(ngModel)]="newOrSelectedGroupName" [options]="filteredGroupNames" [showClear]="true" placeholder="Select a group" [optionDisabled]="filteredGroupNames.length > 1 ? 'inactive' : 'active'" ></p-dropdown> 在您的component.html文件中 <ng-template pTemplate="content"> <div class="field"> <label>Name</label> <p-dropdown [(ngModel)]="newOrSelectedGroupName" [options]="filteredGroupNames" [showClear]="filteredGroupNames.length!=1" placeholder="Select a group" [class.disabled]="filteredGroupNames.length==1" ></p-dropdown> </div> </ng-template> 在你的component.ts file newOrSelectedGroupName; ngOnInit():void { if(filteredGroupNames.lengh==1) { this.newOrSelectedGroupName=filteredGroupNames[0].value; } } 我假设 value 键存在于对象 filteredGroupNames 中，并且它作为值绑定到 HTML 中的下拉列表，如 optionValue="value"。 示例对象是 filteredGroupNames = [ { name:'name 1', value:1 } ]; 在您的 styles.scss 或 styles.css .disabled .p-dropdown-panel, .disabled .p-dropdown-trigger { display: none; } .disabled.p-inputwrapper-focus .p-dropdown { border-color: #ced4da !important; box-shadow: none !important; } 所以我最终做的是： <ng-template pTemplate="content"> <div class="field"> <label>Name</label> <p-dropdown [(ngModel)]="newOrSelectedGroupName" [options]="filteredGroupNames" [showClear]="filteredGroupNames.length !== 1" [optionValue]="getOptionValue()" placeholder="Select a group" pTooltip="There is only one name available to select!" [tooltipDisabled]="filteredGroupNames.length !== 1" [disabled]="filteredGroupNames.length === 1" ></p-dropdown> </div> </ng-template> 并在 ts 文件中： getOptionValue(): string { if (this.filteredGroupNames.length === 1) { const firstName = this.filteredGroupNames[0]; this.newOrSelectedGroupName = firstName; return firstName; } else { return ''; } }

我正在尝试在 flutter 中创建自己的 DropDownSearch 小部件，但无法设置 CompositedTransformFollower 的宽度

// thêm mới drop tự làm 类 MyDropDown 扩展 StatefulWidget { 最终列表列表； 最终字符串标签； 最终的 TextEditingController 控制器； 最终字符串？初始化...

如何使用 <s:select> 标签显示 Map 中的键并将值返回到 Struts 2 中的操作？

我有一个带有键值对的映射。我想在下拉列表中显示键，以及要发送到服务器以识别所选内容的值。 我正在使用 Struts 2。我尝试将地图放入 我有一个带有键值对的Map。我想在下拉列表中显示键，以及要发送到服务器以识别所选内容的值。 我正在使用 Struts 2。我尝试将 Map 放入 <s:select> 标签的 list 属性中，但它显示了下拉列表中的值。 使用 listKey 标签的 listValue 和 <s:select> 属性从对象列表中获取属性。 为了交换映射中的键和值，请将 value 放入 listKey 并将 key 放入 listValue。 <s:select list="someMap" listKey="value" listValue="key"/> 据您所知，Struts 2 中的下拉菜单可以与 List 或任何其他集合（如 Map）一起使用。它使用 OGNL 检索选项文本和值的值。 与List的区别在于Map是通过entrySet()转换并迭代得到选择选项的Map.Entry元素。 您可以使用此对象为下拉列表映射 key 和 value。它有 getKey() 和 getValue() 方法，对于 OGNL 填充下拉列表很有用。第一个用于填充 value 属性，如果选择该属性，则将其提交给操作，第二个用于填充选项的文本。 如果您的下拉列表显示值，则说明您映射了错误的值。这些值应映射为 Map 的键，并将文本显示为值。

如何向按钮添加动态下拉列表并在单击时做出响应？

我正在尝试使用 Javascript 动态地将元素添加到 Bootstrap 5 下拉列表中。我正在关注文档。我可以成功地将动态列表添加到下拉列表中，但是当我选择它时，我

Javascript Bootstrap 5 添加动态下拉列表到按钮并响应点击

我正在尝试使用 Javascript 动态地将元素添加到 Bootstrap 5 下拉列表中。我正在关注文档。我可以成功地将动态列表添加到下拉列表中，但是当我选择它时，我

通过调用 Struts 2 中的 Java 方法在 JSP 中填充下拉列表

我想调用一个Java方法，该方法返回ArrayList，并且我想将该数组列表添加到JSP中的下拉列表中。当用户从下拉列表中选择一个值时，该值将被存储...

通过调用 Struts 2 中的 Java 方法来填充 JSP 中的下拉列表

我想调用一个Java方法，该方法返回ArrayList，并且我想将该数组列表添加到JSP中的下拉列表中。当用户从下拉列表中选择一个值时，该值将被存储...

使用 PHP 和 MySQL 填充基于 Jquery 的下拉列表

我有一个国家/州/城市级联下拉列表。 数据使用PHP/Mysql填充。 数据是针对与国家对应的州/城市选项填写的。 数据也按照数据en填写...

Jquery，如何在数据表中的表格上添加多个按钮？

我有这张桌子，我想自定义桌子上的按钮 从左边开始，我想添加日期（从）、日期（到）、下拉菜单、搜索栏、搜索触发器 我尝试查找文档和博客，但可以...

显示从自定义下拉列表中选择的值

我正在构建一个自定义下拉列表。下拉列表的数据集已填充。但我无法显示从下拉列表中选择的值。有人可以告诉我错误/错误逻辑在哪里吗...

PowerApps 模型驱动应用程序：如何防止重新选择下拉选项

我目前正在开发一个 PowerApps 项目，其中有几个下拉列表（选项集），仅允许用户选择每个团队一次。我想阻止用户重新选择团队...

带有下拉按钮的响应式导航栏

问题：在响应式视图中，当单击任何下拉内容时，下拉按钮不会从菜单图标移动到可见的导航栏。 更详细地：在响应式视图中（屏幕

Dash Python 尝试填充下拉菜单时出错。传递到 ID 为“select_st”的下拉列表中的参数选项无效。预期为 [object] 类型之一

下拉菜单的代码如下所示： dcc.Dropdown(id='select_st', options=[{'label': i, 'value': i} for i in states], 值='FL', 风格={ ...

如何在 Struts 2 中使用 <s:select> 预选择多个值

JSP： JSP： <s:form action="product"> <s:select label="Select Data" cssStyle="width:150; height:73" size="6" multiple="true" headerKey="-1" headerValue="All" list="#{'1':'Data1', '2':'Data2', '3':'Data3', '4':'Data4' }" name="dataValue" value="%{2,3}" /> <s:submit value="save"></s:submit> </s:form> 行动： public class Product { private String dataValue; //getter setter ....... public String execute(){ return "success"; } } 问题： 同时，仅选择一个字段。例如，我传递了值2,3，但只选择了Data3。 我需要同时选择 Data2 和 Data3。 要预先选择多个值，您需要在 value 属性中使用列表或数组作为操作属性。 '1', '2',... 是字符类型值，因此您返回一个字符列表 public List<Character> getDataValue(){ return dataValue; } <s:select label="Select Data" cssStyle="width:150; height:73" size="6" multiple="true" headerKey="-1" headerValue="All" list="#{'1':'Data1', '2':'Data2', '3':'Data3', '4':'Data4' }" name="dataValue" value="%{dataValue}" />

Woocommerce 产品简短描述中同一类别的产品下拉菜单

在 Woocommerce 中，我想在产品简短描述中添加一个下拉列表，显示具有相同类别的所有产品。如果能去产品就更好了...