ionic select picker code example

Example 1: ionic select

<ion-list>
  <ion-list-header>
    <ion-label>
      Single Selection
    </ion-label>
  </ion-list-header>

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select placeholder="Select One">
      <ion-select-option value="f">Female</ion-select-option>
      <ion-select-option value="m">Male</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>Hair Color</ion-label>
    <ion-select value="brown" okText="Okay" cancelText="Dismiss">
      <ion-select-option value="brown">Brown</ion-select-option>
      <ion-select-option value="blonde">Blonde</ion-select-option>
      <ion-select-option value="black">Black</ion-select-option>
      <ion-select-option value="red">Red</ion-select-option>
    </ion-select>
  </ion-item>

</ion-list>

Example 2: ionic picker

<ion-button expand="block" onclick="openPicker()">Show Single Column Picker</ion-button>

const defaultColumnOptions = [
      [
        'Dog',
        'Cat',
        'Bird',
        'Lizard',
        'Chinchilla'
      ]
    ]

    const multiColumnOptions = [
      [
        'Minified',
        'Responsive',
        'Full Stack',
        'Mobile First',
        'Serverless'
      ],
      [
        'Tomato',
        'Avocado',
        'Onion',
        'Potato',
        'Artichoke'
      ]
    ]

    async function openPicker(numColumns = 1, numOptions = 5, columnOptions = defaultColumnOptions){
      const picker = await pickerController.create({
        columns: this.getColumns(numColumns, numOptions, columnOptions),
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel'
          },
          {
            text: 'Confirm',
            handler: (value) => {
              console.log(`Got Value ${value}`);
            }
          }
        ]
      });

      await picker.present();
    }

    function getColumns(numColumns, numOptions, columnOptions) {
      let columns = [];
      for (let i = 0; i < numColumns; i++) {
        columns.push({
          name: `col-${i}`,
          options: this.getColumnOptions(i, numOptions, columnOptions)
        });
      }

      return columns;
    }

    function getColumnOptions(columnIndex, numOptions, columnOptions) {
      let options = [];
      for (let i = 0; i < numOptions; i++) {
        options.push({
          text: columnOptions[columnIndex][i % numOptions],
          value: i
        })
      }

      return options;
    }

Example 3: ion select

<ion-select >
          <ion-select-option *ngFor="let country of countries" value="{{ country.name }}">
            {{ country.name }}
          </ion-select-option>
     </ion-select>