Ionic 4 Hide a select option

Ionic Framework
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

Capture
Capture.PNG1336×543 149 KB

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.

1 Like
12

In your code you use ion-option so maybe you tried to solve this for Ionic 3 and not 4?
In Ionic 4 ion-select has ion-select-option which in return has no checked property. Also ionChange on the ion-select fires in Ionic 4 only after the user confirmed/terminates the dialog, not when the user actually clicks on an ion-select-option (and there is also no ionChange event for specific ion-select-option items).
So what you suggested will not work.

13

Es más simple de lo que parece, solo utiliza la propiedad Placeholder y ahí escribe lo que querías mostrar en ese option, si quieres que el texto no se vea opaco, entonces solo debes editar su css de esta forma .clasedelselect::part(placeholder){ opacity:1 }