Grouping inside select box?

Ionic Framework ionic-v3
1

I need to create the multiple checkbox select box that have grouping label inside the box.
Example

-Appetizer:
.Salad
.etc

-Main Course:
.Steak
.etc

-Desert:
.Ice Cream
.etc

This is my code:

<ion-select [(ngModel)]="food" multiple="true">
                        <ion-label>Toppings</ion-label> <!-- I want to create group label in here -->
                        <ion-option>Bacon</ion-option>
                        <ion-option>Black Olives</ion-option>
                        <ion-option>Extra Cheese</ion-option>
                        <ion-option>Mushrooms</ion-option>
                        <ion-option>Pepperoni</ion-option>
                        <ion-option>Sausage</ion-option>
 </ion-select>

How to create the grouping label inside the ion-select? Thanks…

1 Like
2

Currently this isn’t supported with ion-select/ion-option. Though I like this idea, as it could be built around the same idea as optgroup

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
  </optgroup>
</select>
3

@mhartington hi, I tried to use ‘optgroup’ but it didn’t work. Is there any solution in ionic for this situation?

2 Likes
4

Yeah this would be awesome

1 Like
5

I cannot believe, than one cannot create groups. I find cool the design of ion-select. If one programms a normal Select (for groups) and ion-select for others, would it be not strange/weird? Is there a way to introduce some special class to a ion-option and then using CSS remove/change the ion-option properties (for example: to hide the radio button, to change the size of the option) in order to customize the ion-select?

1 Like
6

Hello, yes this functionality would very useful

7

Useful workaround: Use disabled with IonSelectOption as described here: html - (Ionic 2) Grouping label inside select box - Stack Overflow

1 Like