---
title: "edit-select"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/object-table/column/edit-select/
---
# edit-select

## Overview

<Info>

To get started, see the introductory [guide](/docs/build/ui-components/all-ui-components/object-table/object-table-guides/edit-cells/) on editable `object-table` cells.

</Info>

This editable cell type allows users to pick a value from a predetermined set of options. It is different to [`edit-typeahead`](/docs/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

**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>
```

**main.js**

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

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

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-096bcb69d0c5f41de45f5803831c1d15a52664a7-2fobject-table-edit-select-example-b63853ef.png)

## Standard Attributes

### `on-change`

See [`edit-text` > `on-change`](/docs/build/ui-components/all-ui-components/object-table/edit-text/#on-change)

### `options`

<SyntaxCard defaultValue={"unset"} required />

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`](/docs/build/ui-components/all-ui-components/object-table/edit-text/#value)

## Advanced Attributes

### `disabled`

See [`edit-text` > `disabled`](/docs/build/ui-components/all-ui-components/object-table/edit-text/#disabled)