Ionic 4 Hide a select option

#1

How do I hide an ion-select-option?

For example, I want to hide this because I don’t want it to be in the list of options. Disabled is not the one I’m looking for because it would not hide an option but instead, it disables it. Hope anyone could help me because I’m new in using this kind of framework.

 <ion-select id="dispose" multiple="true">
      <ion-select-option selected value="">What to dispose?</ion-select-option>
 </ion-select>
#2

hello noctis…
can you please send me screen shot
what is exact issue…
i will try to best solution after seen that…

:slight_smile:

#3

I want to hide the option “What to dispose?”

#4

okay…
just try this one.
if is it worked , then me me know :slight_smile:

   <ion-select id="dispose" multiple="true" disabled >
      <ion-select-option selected value="">What to dispose?</ion-select-option>
      <ion-select-option value="">I am not a robot </ion-select-option>
      <ion-select-option value="">Bla Bla Bla</ion-select-option>
    </ion-select>
#5

You should directly show all options instead of showing a header of What to dispose. You could do something like this:

<ion-item>
      <ion-label>What to dispose</ion-label>
      <ion-select [(ngModel)]="your_variable_to_hold_the_select" (ionChange)="your_event($event)">
        <ion-option *ngFor = "let some_data of data" value="{{some_data.some_code}}" checked = "some_data.some_code === your_variable_to_hold_the_select">{{some_data.name}}</ion-option>
      </ion-select>
</ion-item>
#6

Your solution is not what I’m looking for. You’re disabling the selection itself. What I’m trying to do is to hide ion-select-option “What to dispose?”. Is there a hidden much like in HTML5? I just use

 <option select hidden value=""></option>

in HTML5?

#7

I honestly don’t understand what you said. I’m still a newbie here. First time using ionic framework

#8

Found it. I just used placeholder instead of putting it in the option. Doesn’t work in HTML but works in Ionic. Strange…

#9

ok, did you try the code?

#10

I didn’t try it because I couldn’t understand it but thanks anyways. I already found a solution to my problem

#11

It’s very simple. What to dispose becomes the title and will not at all be present in select options as it is trivial to keep there. (ionChange) event triggers when the selection in the dropdown changes. I change the variable your_variable_to_hold_the_select value in the your_event($event) method. This way, the dropdown value automatically changes and you have your value in your_variable_to_hold_the_select.