drop-down-menu 相关问题

占位符不适用于有角度的材质？

<select id="chefId" formControlName="chefId" class="form-control" placeholder="d.ff"> <option value="" selected disabled>Sélectionner un Chef</option> <option *ngFor="let buHead of buHeads" [value]="buHead.userId">{{ buHead.name }}</option> </select> 我想给 ChefId 一个占位符 （https://i.sstatic.net/Z9DCN3mS.png） this.addUserForm = this.formBuilder.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], password: ['', Validators.required], confirmPassword: ['', Validators.required], role: ['', Validators.required], chefId: [''], }); In Angular Material, placeholders for <select> elements are handled differently compared to regular HTML. The placeholder attribute doesn't work directly on <select> elements. Instead, you need to use Angular Material's <mat-select> component, which supports placeholders natively. Here's how you can achieve this using Angular Material's `<mat-select>`: 1.Install Angular Material (if not already installed): ng add @angular/material 2.Import MatSelectModule in your app module: import { MatSelectModule } from '@angular/material/select'; @NgModule({ ... imports: [ ... MatSelectModule, ... ], ... }) export class AppModule { } 3. Update your template to use <mat-form-field> and <mat-select>: <mat-form-field appearance="fill"> <mat-label>Sélectionner un Chef</mat-label> <mat-select id="chefId" formControlName="chefId"> <mat-option value="" disabled>Sélectionner un Chef</mat-option> <mat-option *ngFor="let buHead of buHeads" [value]="buHead.userId">{{ buHead.name }}</mat-option> </mat-select> </mat-form-field> Here, <mat-form-field> is a container for form elements, and <mat-label> serves as a label for the field. The placeholder text "Sélectionner un Chef" is displayed by default when no option is selected. 4.Ensure your form is properly defined in the component: import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent implements OnInit { addUserForm: FormGroup; buHeads = [ { userId: '1', name: 'Chef One' }, { userId: '2', name: 'Chef Two' } // Add more chef objects here ]; constructor(private formBuilder: FormBuilder) {} ngOnInit(): void { this.addUserForm = this.formBuilder.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], password: ['', Validators.required], confirmPassword: ['', Validators.required], role: ['', Validators.required], chefId: ['', Validators.required] }); } }

收到错误错误：“BsDropdownDirective”既不是“ComponentType”也不是“DirectiveType”

我在我的 HTML 中使用 Angular 9 和 NgX [email protected]，如下所示：- 我在我的 HTML 中使用 Angular 9 和 NgX [电子邮件受保护]，如下所示：- <div class="btn-group" dropdown> <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic"> Button dropdown <span class="caret"></span> </button> <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic"> <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li> <li class="divider dropdown-divider"></li> <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a> </li> </ul> </div> 在我的 ts 文件中，我有这样的 import { Component } from '@angular/core'; @Component({ selector: 'demo-dropdown-basic', templateUrl: './basic.html', providers: [ { provide: BsDropdownConfig, useValue: { isAnimated: true, autoClose: true }, }, ], }) export class DemoDropdownBasicComponent {} 当我运行代码时，出现以下错误：- core.js:6241 ERROR Error: 'BsDropdownDirective' is neither 'ComponentType' or 'DirectiveType'. at extractDirectiveDef (core.js:1964) at Array.map (<anonymous>) at def.directiveDefs (core.js:1926) at createTView (core.js:12307) at getOrCreateTComponentView (core.js:12252) at addComponentLogic (core.js:13224) at instantiateAllDirectives (core.js:12994) at createDirectivesInstances (core.js:12209) at ɵɵelementStart (core.js:21302) 你需要定义BsDropdownConfig import { Component } from '@angular/core'; import { BsDropdownConfig } from 'ngx-bootstrap/dropdown'; // add this line @Component({ selector: 'demo-dropdown-basic', templateUrl: './basic.html', providers: [{ provide: BsDropdownConfig, useValue: { isAnimated: true, autoClose: true } }] }) export class DemoDropdownBasicComponent {} 我遇到了问题，上面的 div 中缺少 dropdown 指令

Material UI - 菜单组件锁定主体滚动条

我使用 Material-ui Menu 组件制作了一个下拉菜单。 问题是一旦打开下拉菜单，主体滚动条就会消失并且无法滚动页面。 我试图寻找答案...

正确的语义选择样式

我想在我的网络应用程序中创建一个自定义样式的选择元素。但是，我担心我应该使用的方法。设置默认选择的样式为我提供了一些选项，但我无法完全设置...

获取React JS中的所有字体系列

我是 ReactJS 的新手。我试图在下拉列表中显示所有字体系列，这样，如果我选择其中一种字体系列，则文本（以 SVG 形式显示）字体系列将会更改。 我知道在 .net 中我们...

如何防止“_blank”选项卡中的菜单项重复激活？

我使用带有下拉按钮的垂直侧面导航菜单。由于我希望用户能够同时处理多个菜单/子菜单选项，因此我将每次按下按钮设置为生成一个

如何在 tkinter 中设置一个主按钮，取消选择下拉复选框列表中的所有项目而不删除列表

我正在尝试创建一个按钮来取消选择两个列表中的所有复选框，但我没有成功 这是我的代码 导入 tkinter 从 tkinter 导入 * 从 tkinter 导入 ttk 来自 tkinter

System.Web.HttpException：无法在 DropDownList 中选择多个项目

在页面加载期间，索引 0 已被选择。然后这段代码语句选择了索引1： dropDownList.Items.FindByValue(myValue).Selected = true; // 假设在 dropDo 的索引 1 处找到 myValue...

Angular 混合应用程序 - 模型未更新选择

我正在开发一个混合 Angular/AngularJS 应用程序。 包含下拉框的表单正在迁移到 Angular。此迁移的控件在 Firefox 和 Edge 中按预期工作，但是在 Chr...

如何在角材质的多选下拉菜单中实现搜索功能

我正在开发一个项目，我需要使用多选下拉菜单实现搜索。当我添加下面的代码时，我可以进行搜索，但我之前选择的值在新搜索后消失了。

将 2 个下拉列表和文本字段的值一起添加到 yii 中的另一个文本字段中显示结果

我有两个下拉列表和一个文本字段。我想将它们的值加在一起并使用 Yii 在另一个文本字段中显示结果。 在 _form 中我有这个。 我有两个下拉列表和一个文本字段。我想将它们的值加在一起并使用 Yii 在另一个文本字段中显示结果。 在 _form 中我有这个。 <tr> <td><?php echo $form->labelEx($model,'typeofpaper'); ?></td> <td><?php $data = CHtml::listData(PaperType::model()->findAll(),'id','title'); if(isset($_REQUEST['id'])) { $sel = $_REQUEST['id']; } else { $sel =''; } echo $form->dropDownList($model, 'typeofpaper', $data, array('prompt'=>'Type of Paper','options'=>array($sel=>array('selected'=>true)))); ?> <?php echo $form->error($model,'typeofpaper'); ?></td> </tr> <tr> <td><?php echo $form->labelEx($model,'deadline'); ?></td> <td><?php echo $form->dropDownList($model,'deadline', array('3hrs'=> '3 hrs', '6hrs'=>'6 hrs', '12hrs'=>'12 hrs', '24hrs'=>'1 day', '48hrs'=>'2 days', '72hrs'=>'3 days', '96hrs'=>'4 days', '120hrs'=>'5 days', '144hrs'=>'6 days', '168hrs'=>'7 days', '172hrs'=>'8 days', '196hrs'=>'9 days', '220hrs'=>'10 days', '244hrs'=>'11 days', '268hrs'=>'12 days', '292hrs'=>'13 days', '316hrs'=>'14 days', '340hrs'=>'15 days'),array('empty' => 'Select Urgency Level')); ?> <?php echo $form->error($model,'deadline'); ?> </td> </tr> <tr> <td><?php echo $form->labelEx($model,'nopages'); ?></td> <td><?php echo $form->textField($model,'nopages'); ?> <?php echo $form->error($model,'nopages'); ?></td> </tr> 尝试并遵循这些指南 根据 yiipublic string dropDownList(CModel $model, string $attribute, array $data, array $htmlOptions=array ( )) 的下拉菜单。 因为 $data 并假设 $deadlineData = array('3hrs'=>'3 hrs','6hrs'=>'6 hrs'...) 是数组并表示列表选项（value=>display），你可以使用 array_merge($data,$deadlineData) 组合两个数组，并使用 foreach 循环并获得组合结果。然后您可以继续将结果输出到文本字段中

下拉菜单显示不正确

我正在尝试制作一个下拉菜单，其中有由 p 标签组成的选项，其中有一个 span 标签。问题是，当我选择下拉菜单中的选项之一时......

如何将信号的默认值设置为 HTML select 元素中选项元素的默认值？

我正在使用Fresh/Preact。在 HTML select 元素中，我想要两件事： 接下来显示所选选项的值 信号的默认值是选项元素的默认值 一个...

如何为 PrimeNG 下拉列表设置可见/不可见的组项目？

当我单击组标题时，如果组中有项目，我想使组项目可见/不可见。 是否可以？ 例如，我想在下拉列表中看到 3 个项目（AA、BB、CC），前 2 个选项（AA 和 BB）

为什么“Kontakti”的下拉菜单不起作用？

身体 { 字体系列：Arial、无衬线字体； 保证金：0； 填充：0； } #导航栏{ 背景颜色：#f2f2f2； ...</desc> <question vote="1"> <pre><code> &lt;style&gt; body { font-family: Arial, sans-serif; margin: 0; padding: 0; } #navbar { background-color: #f2f2f2; overflow: hidden; text-align: center; } #navbar a { display: inline-block; color: #333; text-align: center; padding: 20px 30px; /* Increased padding for bigger buttons */ text-decoration: none; font-weight: bold; font-size: 20px; /* Increased font size */ } #navbar a:hover { background-color: orange; color: white; } .dropdown { display: inline-block; /* Change float to display */ position: relative; /* Add position relative for dropdown positioning */ } .dropdown .dropbtn { font-weight: bold; border: none; outline: none; color: #333; padding: 20px 30px; /* Increased padding for bigger buttons */ background-color: inherit; font-family: inherit; margin: 0; font-size: 20px; /* Increased font size */ } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; text-align: left; /* Align dropdown content to the left */ } .dropdown-content a { color: #333; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } &lt;/style&gt; &lt;/head&gt; &lt;body align=&#34;center&#34; bgcolor=#BCD9DD&gt; &lt;div id=&#34;navbar&#34;&gt; &lt;a href=&#34;AB1.html&#34; class=&#34;active&#34;&gt;Info&lt;/a&gt; &lt;a href=&#34;Ratslaukums.html&#34;&gt;Galerija&lt;/a&gt; &lt;div class=&#34;dropdown&#34;&gt; &lt;button class=&#34;dropbtn&#34;&gt;Kontakti&lt;/button&gt; &lt;div class=&#34;dropdown-content&#34;&gt; &lt;a href=&#34;#&#34;&gt;Adrese&lt;/a&gt; &lt;a href=&#34;#&#34;&gt;Tālrunis&lt;/a&gt; &lt;a href=&#34;#&#34;&gt;E-pasts&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;a href=&#34;https://www.melngalvjunams.lv/lv&#34;&gt;Par mums&lt;/a&gt; &lt;/div&gt; </code></pre> <p>不要介意大文本，但首先我最终将所有内容都集中在顶部。现在的问题是，我不知道为什么下拉菜单不起作用。</p> <p>我尝试了很多东西，因为在我将其居中之前，一切都运行良好。我不知道该怎么办，我正在向你寻求帮助。在将文本居中之前，一切正常。为什么现在不行了？</p> </question> <answer tick="false" vote="0"> <p>从#navbar<pre>中删除</pre><code>overflow:hidden</code></p> <pre><code>#navbar { background-color: #f2f2f2; text-align: center; } </code></pre> </answer> </body></html>

在 ASP.NET 运行时创建多级菜单？

我的数据库结构如下 表菜单>> 菜单 ID、菜单名称、链接路径、菜单描述、菜单位置、IsParent、子 ID 我正在 Masterpage 的运行时获取项目并希望显示项目属性...

如何创建多选下拉列表？

我有一个包含五页的 Excel 文档。在第二张表上，Private Sub Worksheet_Change (ByVal Target As Range) 下有三个代码，如下所示： 私人子工作表_更改（由...

如何移动下拉菜单顶部的 3 个热门国家/地区

我目前有一个显示所有国家/地区的国家/地区下拉菜单。通常我的用户会在“美国”、“英国”或“加拿大”之间进行选择。我不想要我的...

Yii2 网格过滤器下拉列表附加选项 arrayHelper

我想向网格中的下拉过滤器添加一个聚合选项（示例中的“所有选项”），该选项涵盖所有其他选项，如下所示： 所有选项 选项1 选项2 选项3 ... ...

Bootstrap 3.3.6 和 JQuery 3.1.0 不兼容？

这两个（都是最新版本）有可能不兼容吗？ （片段中：本地文件为最新版本，网上检索到的文件为旧版本） 有什么吗...