ionic3 - 单击外部离子选择 div 标签时触发离子选择答案

【问题标题】：ionic3 - ion-select triggered when click on outside ion-select div tagionic3 - 单击外部离子选择 div 标签时触发离子选择
【发布时间】：2023-03-25 02:51:01
【问题描述】：

我们在页面中有一个搜索栏和下拉框。当我们点击搜索栏时，下拉菜单被调用。任何人都知道如何阻止这种情况。

<div>
    <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredData()"></ion-searchbar>
  </div>
  <br/>
  <div>
     <ion-select [(ngModel)]="selectedCityTag" placeholder="Filter" multiple="true" (ionChange)="onSelectChange()">
      <ion-option selected *ngFor="let city of cityList">{{city}}</ion-option>
    </ion-select>
  </div>

当我们点击搜索文本框时，下拉菜单被调用。不知道怎么解决。

谢谢 AK

【问题讨论】：

标签： html ionic-framework drop-down-menu ionic3

【解决方案1】：

虽然文档中没有提到，但需要将ion-select 放在ion-item 中，所以这样做可以解决您的问题。

用ion-item 而不是div 包裹你的ion-select。

另外，请注意，为动态生成的ion-option 设置selected 属性将选择ion-select 的所有选项。您可能想在此处设置一些条件。

<div>
  <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredData()"></ion-searchbar>
</div>
<br/>
<ion-item>
  <ion-select [(ngModel)]="selectedCityTag" placeholder="Filter" multiple="true" (ionChange)="onSelectChange()">
    <ion-option selected *ngFor="let city of cityList">{{city}}</ion-option>
  </ion-select>
</ion-item>

【讨论】：

【解决方案2】：

由 ion-select 生成的 html 会产生一个按钮类型的子项。

我设置宽度和高度等于0，比如

.item-cover {
  height: 0;
  width: 0;
}

【讨论】：