Question

我有一个下拉菜单，我想在其中添加一个选项来插入您自己的文本，但是在getbootstrap.com或其他任何地方的文档中似乎找不到它。

以前有人遇到过吗？

我尝试过选择下拉菜单和btn下拉菜单。还插入文本，但我似乎无法解决。

<div class="form-group" [ngClass]="{'has-error':DSO.touched && DSO.invalid}">
<!--Unsure this is correct-->
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="DSO" title="">
        Name of company
        <span class="required">*</span>
    </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <select class="form-control" name="dsocompany" [(ngModel)]="category.status">
            <option data-tokens="company 1" [selected]="category.status ==0">company 1</option>
            <option data-tokens="Company 2" [selected]="category.status ==1">company 2</option>
            <option data-tokens="company 3" [selected]="category.status ==2">Company 3</option>     
        </select>
        <div *ngIf="DSO.touched && DSO.invalid">
            <p class="required" *ngIf="DSO.errors.required">Choose company</p>
        </div>
    </div>
</div>

我想要一个下拉菜单，其中有一个“其他”选项，用户可以在其中输入任何其他公司名称。也许是“其他”的新框，或者直接在下拉菜单中。但是我也想进行实时搜索，所以最好用另一个盒子。

我已经修复了它，只需要重写为打字稿jsfiddle

Answer 1

第一版解决方案： 必须重写为打字稿jsfiddle

最终解决方案，只是忘记了上传代码。这是我的方法。

<div class="form-group row" [ngClass]="{'has-error':xpo.touched && xpo.invalid}" *ngIf="product.xpoSelection == '1'">
<label class="col-sm-12 col-form-label" for="XPO" title="">
Name of producer<br>
<small style="font-weight:normal;">
<i>Missing producer choose "Other" and fill field below</i></small>
</label>
  <div class="col-sm-7 col-md-7" *ngIf="xpo">
  <select class="form-control" title="Producer" [(ngModel)]="selectedVal" (change)="selectChangeHandler($event)" required id="xpo" name="xpo"  >
         <option selected value="base">Choose producer</option>
         <option value="other">Other</option>
         <option *ngFor="let object of xpo.XpoList" [value]="object.Name" [selected]="object.Name == selectedXpoCompany">{{object.Name}}</option>  </select>
<!--OTHER XPO-->
   <div *ngIf="selectedVal === 'other'">
       <div class="form-group row">
          <label class="col-sm-12 col-form-label" for="otherXpo" title="">
          Please enter other XPO<br>
          </label>
          <div class="col-sm-7 col-md-7" (change)="selectChangeHandler($event)">
              <input type="text" class="form-control" [value]="otherXpo" id="otherXpo" #otherXpo="ngModel" [(ngModel)]="product.XPO" name="otherXpo"  />
          </div>
      </div>
    </div>
   <br>
 </div>
</div>

将“其他”作为输入文本选项添加到下拉列表

1 个答案: