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

【问题标题】：Add "other" as a input text option to dropdown list将“其他”作为输入文本选项添加到下拉列表
【发布时间】：2019-09-24 22:21:09
【问题描述】：

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

有人遇到过这种情况吗？

我尝试制作一个选择下拉菜单和 btn 下拉菜单。也插入文本，但我似乎没有解决它。

<div class="form-group" [ngClass]="{'has-error':XPO.touched && XPO.invalid}">
<!--Unsure this is correct-->
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="XPO" 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="xpocompany" [(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="XPO.touched && XPO.invalid">
            <p class="required" *ngIf="XPO.errors.required">Choose company</p>
        </div>
    </div>
</div>

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

【问题讨论】：

我认为您正在寻找类似 select2 的东西。如果我没记错的话，它应该有一个选项来添加你的额外选项。
@LelioFaieta 谢谢。对于不确定的人，你能指导我找到select2的地方吗？这是另一个库，并且在引导程序中不正确？
你听说过一个很棒的工具，叫做 google 吗？ :-)
LoL @LelioFaieta 请告诉我更多信息 ;) （ps。找到 bootstrap.theme，但这对我的问题没有帮助。我会继续搜索，只是问你有没有快速回复所以我可以专注于代码而不是搜索）；）

标签： javascript html angular twitter-bootstrap

【解决方案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>

【讨论】：