Custom Field Type: Enable second textbox

Hi All,

I’m developing a module with a custom field type that allows the user to insert a zip code and then select the city (Yes, I live in a country where several cities can use the same zipcode).

What I have already is:
– FieldType, FieldWidget and FieldFormatter
– ZipAutoCompleteFormatter

I can type a zipcode and then the autocomplete works as expected and I can pick a zipcode.

Now I want to able to fill the select with only the possible cities, when the I picked my zip code.

My Widget looks like this:

public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {        
        $element['postcode'] = $element + array(
            '#type' => 'textfield',            
            '#description' => 'Postcode',
            '#placeholder' => '1000',            
            '#autocomplete_route_name' => 'custom_field_types.zip_autocomplete',
            '#autocomplete_route_parameters' => array(),            
            '#maxlength' => 4,
        );       
        
        $element['gemeente'] = $element + array(
            '#type' => 'select',
            //'#options' => What do I do??
            '#description' => 'Gemeente',                        
            '#maxlength' => 100,
        );                  
        return $element;
    }

This is a small part of my zipcode/city array:

$list = array(
            '1300' => array('Limal',
                            'WAVRE'),
            '1301' => array('Bierges'),
            '1310' => array('LA HULPE'),
            '1315' => array('Glimes',
                            'INCOURT',
                            'Opprebais',
                            'Piètrebais',
                            'Roux-Miroir'),
            '1320' => array('BEAUVECHAIN',
                            'Hamme-Mille',
                            'L'Ecluse',
                            'Nodebais',
                            'Tourinnes-La-Grosse'),
            '1325' => array('Bonlez',
                            'CHAUMONT-GISTOUX',
                            'Corroy-Le-Grand',
                            'Dion-Valmont',
                            'Longueville'),
            '1330' => array('RIXENSART'),
            '1331' => array('Rosières'),
            '1332' => array('Genval'),
            '1340' => array('Ottignies',
                            'OTTIGNIES-LOUVAIN-LA-NEUVE'),
        );

Who can give any tips or could help me out please?

Kind regards,
Frederik

Drupal version: 


Source: https://www.drupal.org/taxonomy/term/4/feed