dropdown 相关问题

if (document.getElementById('actionId').value == 'recommendWithFin') { var curRevSeqId = document.getElementById('currentReviewerSequence').value; var allRevLen = allReviewersArray.length; 如果（全部R...

javascript arrays dropdown

回答 1 投票 0

PrimeVue 下拉菜单从 #value 模板访问国家/地区代码以设置默认标志

我在学生编辑模式中有一个下拉菜单，需要显示默认国家/地区的国旗。在 PrimeVue 中，可以从带有 #option="slotProps" 的模板访问国家/地区代码，但不能...

vue.js dropdown primevue

回答 1 投票 0

当单元格具有下拉列表中的文本时，从另一个单元格返回值

我在文本下拉列表中有一个项目列表，当选择时我希望它从另一个单元格返回一个数字（本质上是服务的费率）我已经成功为

google-sheets text dropdown

回答 1 投票 0

在DropdownButton中隐藏选中的DropdownItem的文本，只显示图标

我创建了一个带有两个 DropdownItems（共享和编辑）的 DropdownButton。每当我选择一个 DropdownItem（例如如图 2 所示进行编辑）时，就会显示所选项目的值（图 2...

flutter user-interface dropdown

回答 1 投票 0

未捕获类型错误：n 不是带有 Bootstrap 4 下拉列表的构造函数

我的页面中有多个下拉菜单。位于导航内部工作正常，但位于页面内部则不起作用位于导航内部页面内部问题是什么？谢谢你。

bootstrap-4 dropdown popper.js

回答 3 投票 0

Blazor 自定义下拉列表，具有 HTML 选择并按文本排序，而不是枚举值

我正在尝试为枚举构建一个自定义 Blazor 下拉组件，该组件能够按枚举成员的显示值/文本对其进行排序。我有以下代码：我正在尝试为枚举构建一个自定义 Blazor 下拉组件，该组件能够按枚举成员的“显示值/文本”对枚举成员进行排序。我有以下代码： <div> <select value="@this.SelectedValue" @onchange="@this.OnSelectedValueChanged" @key="@this.Items"> @foreach (var value in this.Items) { // Use enum value as value and display name as text. if (value is Enum enumName) { <option id="@value" value="@value">@enumName.GetDisplayName(CultureInfo.CurrentCulture)</option> } } </select> </div> 排序顺序枚举： public enum SortOrder { None, Ascending, Descending } 在文件后面的代码中： private List<TItem?> OriginalItems { get; set; } = []; [Parameter] [EditorRequired] public IEnumerable<TItem?> Items { get; set; } = []; [Parameter] public TItem? SelectedValue { get; set; } [Parameter] public EventCallback<TItem?> SelectedValueChanged { get; set; } [Parameter] public EventCallback<TItem?> OnValueChanged { get; set; } [Parameter] public SortOrder SortOrder { get; set; } protected override void OnInitialized() { base.OnInitialized(); this.OriginalItems = this.Items.ToList(); this.SortItems(); } protected async Task OnSelectedValueChanged(ChangeEventArgs args) { if (args.Value is not string value) { return; } if (this.SelectedValue is Enum _) { try { var result = (TItem?)Enum.Parse(typeof(TItem?), value); await this.SelectedValueChanged.InvokeAsync(result); await this.OnValueChanged.InvokeAsync(result); } catch { // ignored } } } private void SortItems() { if (this.SortOrder == SortOrder.None) { return; } if (typeof(TItem).BaseType == typeof(Enum)) { this.Items = this.SortOrder == SortOrder.Ascending ? [.. this.Items.OrderBy(f => (f as Enum)?.GetDisplayNameForEnum(CultureInfo.CurrentCulture))] : [.. this.Items.OrderByDescending(f => (f as Enum)?.GetDisplayNameForEnum(CultureInfo.CurrentCulture))]; } } GetDisplayValue函数仅获取枚举的显示值，并为放入下拉列表中的所有枚举实现，例如： private static string GetDisplayName(this SortOrder order, CultureInfo culture) { var de = culture.Name.StartsWith("de"); return order switch { SortOrder.None => de ? "Keine" : "None", SortOrder.Ascending => de ? "Aufsteigend" : "Ascending", SortOrder.Descending => de ? "Absteigend" : "Descending", _ => $"[[{type}]]" }; } 还有一个用于过滤的输入字段、过滤方法、过滤器大小以及其他一些内容，例如设置的 id。但是，我删除了它们，因为它们与问题无关。 TItem 是一个通用成员（在我的例子中仅用于枚举）。当我将组件添加到页面时，初始排序起作用。搜索作品。但是，当我选择其中一项时，排序将被忽略，并且 select 似乎会按枚举成员值回退/“排序”（例如，value= 的 option 中指定的内容）。有没有办法始终让 select 按显示名称排序，即使在值选择更改后（调用 OnSelectedValueChanged() 后）？提示：在SortItems()结束时调用OnSelectedValueChanged()不起作用。提示 2：在 SortItems() 中的 this.OriginalItems = this.Items.ToList(); 之前调用 OnInitialized() 也没有帮助。提示 3：对列表进行排序后，使用 this.Items 的列表索引作为选择中的值不起作用，并且会降级，即所选值已正确设置，但不再显示在下拉列表中。我现在想出的解决方案是重写 SortItems 函数以返回一个值，无论集合是否更改（例如重新排序），然后使用 OnAfterRender() 调用 StateHasChanged()。变化： protected override void OnAfterRender(bool firstRender) { if (!firstRender) { if (this.SortItems()) { this.StateHasChanged(); } } base.OnAfterRender(firstRender); } private bool SortItems() { if (this.SortOrder == SortOrder.None) { return false; } if (typeof(TItem).BaseType == typeof(Enum)) { var initialItems = this.Items.ToList(); this.Items = this.SortOrder == SortOrder.Ascending ? [.. this.Items.OrderBy(f => (f as Enum)?.GetDisplayName(CultureInfo.CurrentCulture))] : [.. this.Items.OrderByDescending(f => (f as Enum)?.GetDisplayName(CultureInfo.CurrentCulture))]; return !Enumerable.SequenceEqual(initialItems, this.Items); } return false; }

c# select enums blazor dropdown

回答 0 投票 0

如何为角度过滤器制作依赖的另一个下拉列表

如何使 Angular 中的过滤器依赖另一个下拉菜单。我有多个下拉菜单，它们相互依赖。我正在使用反应形式。如何在角度中为过滤器建立依赖的另一个下拉菜单。我有多个下拉菜单，它们相互依赖。我正在使用反应形式。 <select (change)="checkFirstDropdown()" formControlName="id" class="FormControl cond-size"> <option value="null" disabled >Please Select Option</option> <option [ngValue]="noneDropDown" selected> none </option> <ng-container *ngIf="checkMainIndex==0"> <ng-container *ngFor="let conditionsOperatorElement of allObjects.conditionsOperator"> <option *ngIf="conditionsOperatorElement.conditionsOperatorId==1" [ngValue]="conditionsOperatorElement.conditionsOperatorId" >{{ conditionsOperatorElement.title }}</option> </ng-container> </ng-container> <ng-container *ngIf="checkMainIndex!=0"> <option [ngValue]="conditionsOperatorElement.conditionsOperatorId" *ngFor="let conditionsOperatorElement of allObjects.conditionsOperator">{{ conditionsOperatorElement.title }}</option> </ng-container> </select> 我想我有一个解决方案给你。您可以在 change 函数上执行此操作。这是我的示例代码和 stackblitz 演示链接。 HTML： <h1>Reactive forms SELECT-OPTIONS</h1> <h2>Tracking simple string</h2> <form [formGroup]="form"> <label>Country:</label><br> <select formControlName="country" (change)="checkFirstDropdown($event.target.value)"> <option *ngFor="let country of countries" [value]="country.id"> {{ country.name }} </option> </select> <br> <br> <label>City</label><br> <select formControlName="city" > <option *ngFor="let city of cities" [value]="city.id"> {{ city.city }} </option> </select> </form> TS： import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; import {Country} from './country'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { countries = [ { id: 'us', name: 'United States' }, { id: 'uk', name: 'United Kingdom' }, { id: 'ca', name: 'Canada' } ]; cities=[]; form = new FormGroup({ country: new FormControl(), city: new FormControl() }); checkFirstDropdown($event){ this.cities=cityList.filter(c=>c.cid===$event); let itm=this.cities[0]; this.form.controls['city'].setValue(itm.id); console.log($event); } } export const cityList = [ { id: "1", cid: 'ca', city: "toronto", }, { id: "2", cid: 'ca', city: "Vancouver", }, { id: "3", cid: 'us', city: "New York City", }, { id: "4", cid: 'us', city: "Los Angeles", }, { id: "5", cid: 'uk', city: "London", }, { id: "6", cid: 'uk', city: "BRIGHTON", } ]; **HTML**: <div class="row mt-3"> <div class="col-3"> <label for="">Select Category</label> <select class="form-control" [(ngModel)]="selectedCategory" (change)="onCategoryChange()" (change)="checkFirstDropdown(selectedCategory)"> <option value="">Select</option> <option *ngFor="let category of categories" [value]="category"> {{category}}</option> </select> </div> <div class="col-3"> <label for="">Select Product</label> <select class="form-control" [(ngModel)]="products"> <option value="">Select</option> <option *ngFor="let product of products" [value]="product"> {{product.name}}</option> </select> </div> <div class="Container"> <app-my-table></app-my-table> </div> </div> **TS**: import { Component, OnInit } from '@angular/core'; import { ProductService } from '../product.service'; import { Product } from '../product'; @Component({ selector: 'app-pos', templateUrl: './pos.component.html', styleUrls: ['./pos.component.css'] }) export class POSComponent implements OnInit { categories: string[] = []; products: Product[] = []; selectedCategory: string = ''; selectedCategoryProducts: any[] = []; constructor(private productService: ProductService) { } ngOnInit() { //it loads your first dropdown data this.loadData(); } loadData() { this.productService.getCategoriesOnly().subscribe((category: any) => { this.categories = category.data; }) } //checks first dropdown value checkFirstDropdown(selectedCategory: string) { this.selectedCategoryProducts = this.products.filter(c => c.category === selectedCategory); if (selectedCategory != null || selectedCategory != "Select") { this.getProductByCategory(selectedCategory); } } // its an api call in service which gets data for 2nd list getProductByCategory(category: string) { this.productService.getProductByCategory(category).subscribe((product: any) => { this.products = product.data; }) } // on changing category first it will empty the array of products onCategoryChange() { this.products = []; // Reset selected product when category changes } } }

angular forms dropdown angular-reactive-forms

回答 0 投票 0

jetpack 中的下拉菜单可自动滚动到所选项目

当我打开下拉菜单时，我需要自动滚动到所选项目。如果我的列表中有 20 项，我选择了第 18 项。现在我重新打开下拉列表，它应该在下拉视图中显示所选项目...

kotlin drop-down-menu android-jetpack-compose dropdown android-jetpack

回答 1 投票 0

Bootstrap 5.3 事件在 jQuery .on 事件中不起作用

这是一个很奇怪的问题。我以前从来没有遇到过这样的问题... 这是我的下拉菜单... $(document).on('show.bs.dropdown', "#mydropdown", function() { console.log('命中！'); }); 这是一个很奇怪的问题。我以前从来没有遇到过这样的问题... 这是我的下拉菜单... $(document).on('show.bs.dropdown', "#mydropdown", function() { console.log('hit!'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="dropdown" id="mydropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> 如果我将这个确切的下拉代码复制到项目测试中... 下拉菜单有效，我的其他 jQuery 也有效，但 jquery 下拉事件永远不会触发。这是我的完整 JS 代码，它加载在页脚中...... // load jquery import $ from 'jquery'; // import bootstrap src js import 'bootstrap/js/src/alert'; import 'bootstrap/js/src/base-component'; import 'bootstrap/js/src/button'; import 'bootstrap/js/src/carousel'; import 'bootstrap/js/src/collapse'; import 'bootstrap/js/src/dropdown'; import 'bootstrap/js/src/modal'; import 'bootstrap/js/src/offcanvas'; import 'bootstrap/js/src/popover'; import 'bootstrap/js/src/scrollspy'; import 'bootstrap/js/src/tab'; import 'bootstrap/js/src/toast'; import 'bootstrap/js/src/tooltip'; // on ready $(document).ready(function() { // this does not work... $(document).on('show.bs.dropdown', "#mydropdown", function() { console.log('hit!'); }); // however if I just use the js version, this works! const myDropdown = document.getElementById('mydropdown') myDropdown.addEventListener('show.bs.dropdown', event => { console.log('hit!'); }); }); 我如何在上面的演示中工作，但在我的项目中不起作用。任何帮助都会非常感谢。尝试绑定到元素而不是文档本身。它看起来是 API 的约定 - https://api.jquery.com/on/ $('#mydropdown').on('show.bs.dropdown', function() { console.log('hit with jQuery!'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="dropdown" id="mydropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>

jquery events dropdown bootstrap-5

回答 1 投票 0

无法设置Flet下拉值

无法设置下拉列表的值。我正在使用舰队网站上的示例。设置值的唯一方法是在下拉列表中添加一些项目，但是但我需要的是设置值而不进行任何选择...

python dropdown flet

回答 1 投票 0

dropdown 相关问题

最新问题