> For the complete documentation index, see [llms.txt](https://docs.opencityitalia.it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.opencityitalia.it/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/la-select.md).

# La select

Il componente "Select" permette all’utente di selezionare un'opzione da un elenco predefinito, simile a un menu a tendina.

<figure><img src="/files/jrvmohCFqgirAzfBzEEZ" alt=""><figcaption></figcaption></figure>

Successivamente, collocati nella sezione "Data" e compila la voce "Data source label" con le opzioni che l'utente dovrà indicare in fase di richiesta, specificando il nome (*label*) e il valore (*value*).

<figure><img src="/files/TEsOEEC0FrpBcuHJGKkk" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
I valori indicati nella colonna *value* sono necessari per la gestione delle [relazioni tra componenti](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/le-funzioni/relazione-tra-i-dati-i-conditional.md).

I dati del componente, inoltre, possono essere [popolati via API.](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/le-funzioni/popolare-un-form-con-dati-provenienti-da-api.md)
{% endhint %}

### La select custom

La **select custom** permette di mostrare opzioni diverse in base al valore selezionato in un campo precedente del modulo. È utile quando le scelte disponibili cambiano a seconda della risposta fornita in precedenza.

Per configurarla, collocati nella sezione **Data** del componente Select, seleziona come **Data Source Type** "Costum" e individua il campo **Custom Values**. Inserisci qui il codice JavaScript che definisce le opzioni da mostrare in base al valore del campo di riferimento.

<figure><img src="/files/wAIQS2WZxtFirrFTSPHm" alt=""><figcaption></figcaption></figure>

Supponiamo che il modulo contenga un campo `for_whom` (chi presenta la richiesta) con tre possibili valori: `cittadino`, `delegato` e `legale_rappresentante`. In base alla scelta del ruolo, la select successiva deve mostrare opzioni diverse.

{% hint style="info" %}
Per scrivere le condizioni di comparsa in base al valore del campo `for_whom`, consulta la sezione [Relazione tra i dati: i conditional](/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/le-funzioni/relazione-tra-i-dati-i-conditional.md#condizionale-avanzato).
{% endhint %}

Nel campo **Custom Values** inserisci:

```javascript
citt = [
    { "label": "residente nell'area ZTL", "value": "residente" },
    { "label": "domiciliato nell'area ZTL", "value": "domiciliato" },
    { "label": "non sono residente o domiciliato, ma proprietario o affittuario di garage o immobile nell’area ZTL", "value": "immobile" },
    { "label": "possessore di contrassegno invalidi", "value": "invalidi" },
    { "label": "genitore di figlio iscritto a scuola", "value": "genitore" }
  ]
  
impre = [
    { "label": "impresa con sede operativa nella ZTL", "value": "sede" },
    { "label": "impresa che fa attività di carico e scarico", "value": "carico" }
  ]
  
if (data.for_whom === "cittadino" || data.for_whom === "delegato") {
  values = citt
} else {
  values = impre
}
```

Poi, nel campo **Refresh Options On**, seleziona il componente `for_whom`. In questo modo la select aggiorna automaticamente le opzioni ogni volta che l'utente modifica la selezione nel campo di riferimento.

<div><figure><img src="/files/3gO8aY4qcACiWXjhVoMg" alt=""><figcaption></figcaption></figure> <figure><img src="/files/XFKiEg0zHddtym2cqdZu" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Se non imposti il campo **Refresh Options On**, le opzioni vengono calcolate solo al caricamento del modulo e non si aggiornano quando l'utente cambia la selezione precedente.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.opencityitalia.it/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/la-select.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.