如何在选择下拉选项时显示div

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在选择下拉选项时显示div相关的知识,希望对你有一定的参考价值。

我正在创建一个表单,当用户选择该选项时,我有一个下拉列表

软件开发师

显示一个新的div,有两个选项

  1. App Developer
  2. Web开发人员

我在下面给出代码 - :

html代码 -

<div class="form-group">
         <label for="dept"> Departmant </label>
         <select id="dept" (change)="fun()" class="form-control" class="form-control" name="departmant" [(ngModel)]="departmant">
           <option value="1"> HelpDesk </option>
           <option value="2"> Hr</option>
           <option value="3"> Software Engineer </option>
           <option value="4"> System Admin </option>
        </select>
         </div>

<div class="form-group" *ngIf="doninSe">
        <label for="domin"> Domain: </label>
        <select id="domin" class="form-control" name="domin" [(ngModel)]="domin">
          <option *ngFor="let domins of Domin"> {{domins.name}}  </option>
        </select>
</div>

ts代码 - :

export class CreateEmployeeComponent implements OnInit {
  DominSe: boolean = True ;

constructor() { }

  Domin: Departmants[] =
                   [{id: 1 , name: 'App Developer' },
                    {id: 2 , name: 'Web Developer'},
                  ];


  ngOnInit() {
  }

}

我在定义DomineSe变量时也遇到错误

DominSe: boolean = True ;

得到错误 - :

[ts] Cannot find name 'True'.
any
答案

布尔值应为true而不是True,并且在qtml中使用与.ts中声明的相同的变量名称

这是一个例子

<div class="form-group" *ngIf="dominSe">
     <label for="domin"> Domain: </label>
     <select id="domin" class="form-control" name="domin" [(ngModel)]="domin">
         <option *ngFor="let domins of Domin"> {{domins.name}}  </option>
      </select>
</div>

.ts

dominSe: boolean = true;
另一答案

应该是true

DominSe: boolean = true;

以上是关于如何在选择下拉选项时显示div的主要内容,如果未能解决你的问题,请参考以下文章

在下拉更改时显示 Bootstrap 模态表单,并在插入数据库后选择该值

如何使用 React js 在下拉菜单中的选择选项上显示不同的组件

从下拉列表中选择任何值时显示 3 个按钮 [重复]

当复选框兄弟姐妹更改为选中时显示警报

仅在鼠标悬停 div 时显示滚动条

在动态 jQuery 表单中选择特定选项时显示输入