# edit-select

## Overview

{% hint style="info" %}
To get started, see the introductory [guide](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/object-table-guides/edit-cells) on editable `object-table` cells.
{% endhint %}

This editable cell type allows users to pick a value from a predetermined set of options. It is different to [`edit-typeahead`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/column/edit-typeahead) in that it uses the underlying operating system `select` native UX to provide options.

### Basic Example

{% code title="main.view\.xml" %}

```xml
<object-table ...>
    <column display="{field}">
        <edit-select options="$:getColorOptions()" value="$object.favorite_color" on-change="$:updateFavoriteColor($object, newValue, oldValue)" />
    </column>
</object-table>
```

{% endcode %}

{% code title="main.js" %}

```javascript
function getColorOptions() {
    return ["Red", "Purple", "Blue", "Green", "Yellow"];
}

function updateFavoriteColor(obj, newValue, oldValue) {
    obj.favorite_color = newValue;
    obj.save();
}
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-096bcb69d0c5f41de45f5803831c1d15a52664a7%2Fobject-table-edit-select-example.png?alt=media)

## Standard Attributes

### `on-change`

See [`edit-text` > `on-change`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/edit-text#on-change)

### `options`

**Required**

**Default**: unset

Specifies an array of options to list when the user activates the `edit-select` cell.

There are three possible ways to provide options to `edit-select`:

**1. Simple array (set)**

This function is useful if the options represent the underlying data (display value == key value)

```javascript
function getOptions(){
    return [ "apple", "pear", "orange" ]
}
```

**2. Simple object (map)**

This function is useful when the key and display values differ (display value != key value)

JS

```javascript
function getOptions(){
    return {
        a: 'Apple',
        p: 'Pear',
        o: 'Orange'
    }
}
```

**3. Advanced array (collection)**

An advanced array enables one to build up a collection of objects dynamically. Having data in this format makes it easy to use 3rd party libraries such as `Lodash` or native `map`, `filter` or `reduce` functions.

JS

```javascript
function getOptions(){
    return [
        { key: "a", value: "Apple" },
        { key: "p", value: "Pear" },
        { key: "o", value: "Orange" },
    ]
}
```

**4. Row `$object`**

Since JourneyApps Runtime version **4.90.4** you can pass the table row (`$object`) to the `options` attribute. This is useful if you want to generate dynamic options based on the specific object.

```xml
<column heading="Fruit">
  <edit-select options="$:getOptions($object)" value="$:getValue($object)" />
</column>
```

JS

```javascript
function getOptions(obj) {
  // Do something with obj
  if(obj.status == 'new') {
    // Check if obj is still warranty
    if(inWarranty(obj)) {
      return ['Contact Support', 'Return']
    }
    return ['Log first service']
  }

  return ['Diagnose', 'Service', 'Scrap']
}
```

### `value`

See [`edit-text` > `value`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/edit-text#value)

## Advanced Attributes

### `disabled`

See [`edit-text` > `disabled`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/edit-text#disabled)